【AJAX】——XMLHttpRequest对象
2016-02-03 08:30
260 查看
XMLHttpRequest对象是在AJAX视频中重点介绍的一个知识点,最早是在IE5.0中以ActiveX控件的形式出现的,后来被很多浏览器厂商开始支持,但在各个浏览器的实现上有所不同。
2.注册回调函数
3.使用open方法设置和服务器端交互的基本信息
4.设置发送的数据,开始和服务器端交互
5.在回调函数中判断交互是否结束,相应是否正确,并根据需要获取服务器端返回的数据,更新页面内容
2.设置回调函数时,不要在函数名后面加括号。加括号表示将回调函数的返回值注册给onreadystatechange属性。
3.open方法最多可以有五个参数,其中头三个参数是必须的。
使用GET方法时,请求数据位于URL链接中,后面的send方法的参数直接写null就可以使用;
使用POST方式时,open方法后面需要先调用setRequestHeader方法,来设置contentType的值,然后调用send方法,send的参数就是请求的数据。
4.回调函数中,最好将判断readyState和status的两个if条件,分开来写。readyState的判断条件位于外层,status的位于内层;
5.当服务器端没有正确返回XML数据时,在Javascript中使用responseXML的方式获取返回的XML数据对应的DOM对象时,FireFox和IE的结果是有差别的。
2.关键代码:
1.请求数据中包含中文,服务器端程序接收错误导致出现乱码;
2.响应数据中包含中文,编码设置错误导致浏览器中看到的结果数据是乱码。
对于响应数据乱码的问题,要保证页面端定义的charset和http响应头的Content-Type中定义的charset一致即可。
http响应头的Content-Type中charset设置为utf-8;仅仅使用"MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"这两个中的一个来创建XMLHttpRequest对象。
XMLHttpRequest的五步使用法
1.建立XMLHttpRequest对象;2.注册回调函数
3.使用open方法设置和服务器端交互的基本信息
4.设置发送的数据,开始和服务器端交互
5.在回调函数中判断交互是否结束,相应是否正确,并根据需要获取服务器端返回的数据,更新页面内容
XMLHttpRequest的详细属性和方法
方法 | 描述 |
Open(String methos,String url,Boolean asynch,String username,String password) | 指定和服务器端交互的HTTP方法,URL地址及其它请求信息。 Method表示HTTP请求方法,支持所有HTTP的方法;asynch表示是否采用异步同步,true表示异步,false表示同步。 |
Send(content) | 向服务器发出请求,如果采用异步方式,该方法会立即返回; Content可以不指定或指定为null表示,不发送数据; |
GetAllResponseHeaders() | 返回包含HTTP的所有响应头信息; 返回值是一个字符串,包含所有头信息,其中每一个键名和键值用冒号分开 |
SetRequestHeader(String header,String value) | 设置HTTP请求中的指定头部header的值为value,此方法需在open方法以后调用。 |
GetResponseHeader(String header) | 返回HTTP响应头中指定的键名header对应的值 |
Abort() | 停止当前http请求,对应的XMLHttpRequest对象会复位到未初始化的状态 |
ResponseText | 服务器响应的文本内容 |
ResponseXML | 服务器响应的XML内容对应的DOM对象 |
Status | 服务器返回的http状态码 |
StatusText | 服务器返回状态码的文本信息 |
XMLHttpRequest的五步使用注意事项
1.不同浏览器中XMLHttpRequest对象建立的方式不同;2.设置回调函数时,不要在函数名后面加括号。加括号表示将回调函数的返回值注册给onreadystatechange属性。
3.open方法最多可以有五个参数,其中头三个参数是必须的。
使用GET方法时,请求数据位于URL链接中,后面的send方法的参数直接写null就可以使用;
使用POST方式时,open方法后面需要先调用setRequestHeader方法,来设置contentType的值,然后调用send方法,send的参数就是请求的数据。
4.回调函数中,最好将判断readyState和status的两个if条件,分开来写。readyState的判断条件位于外层,status的位于内层;
5.当服务器端没有正确返回XML数据时,在Javascript中使用responseXML的方式获取返回的XML数据对应的DOM对象时,FireFox和IE的结果是有差别的。
扩展问题
解决XMLHttpRequest请求的缓存问题
1.我们使用添加时间戳的方式来解决;2.关键代码:
if(url.indexOf("?")>=0){ url=url+"&t="+(new Date()).valueOf(); }else{ url=url+"?t="+(new Date()).valueOf(); }
解决AJAX应用中的中文问题
在使用AJAX的过程中,出现中文乱码有两种情况:1.请求数据中包含中文,服务器端程序接收错误导致出现乱码;
2.响应数据中包含中文,编码设置错误导致浏览器中看到的结果数据是乱码。
对于响应数据乱码的问题,要保证页面端定义的charset和http响应头的Content-Type中定义的charset一致即可。
http响应头的Content-Type中charset设置为utf-8;仅仅使用"MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"这两个中的一个来创建XMLHttpRequest对象。
小结
在AJAX的视频中,是针对知识点分章节来讲解的,这样更清晰的把知识点有针对性的屡了出来,再通过代码的实例说明,让学者能够更容易的理解并吸收,关于XMLHttpRequest对象的讲解大致就是这一部分!相关文章推荐
- 解决Ajax悬停效果,无法遮蔽FLASH的问题
- 再谈Jquery Ajax方法传递到action(补充)
- Dom在ajax技术中的作用说明
- 使用Ajax实时检测"用户名、邮箱等"是否已经存在
- 探讨Ajax中同步与异步之间的区别
- ajax中data传参的两种方式分析
- 原生AJAX写法实例分析
- 探秘ajax跨域请求
- JQuery ajax返回JSON时的处理方式 (三种方式)
- Ajax中浏览器和服务器交互详解
- ajax实现点击不同的链接让返回的内容显示在特定div里
- ajax 动态传递jsp等页面使用id辨识传递对象
- ajax与传统web开发的异同点
- AJAX简单应用实例-弹出层
- AJAX初级教程之初识AJAX
- Ajax无刷新分页的性能优化方法
- jquery对ajax的支持介绍
- jQuery基于ajax实现星星评论代码
- Ajax 说的比较清楚的一篇文章
- 基于iframe实现ajax跨域请求 获取网页中ajax数据