【从0到1学Web前端】javascript中的ajax对象(一)
2015-06-24 10:18
585 查看
现在最流行的获取后端的(浏览器从服务器)数据的方式就是通过Ajax了吧。今天就来详细的来学习下这个知识吧。如果使用ajax来访问后段的数据,浏览器和浏览器端的js做了那些工作呢?我做了一个图,请大家看一下:
代码如下:
此处分别是根据浏览器是否支持
当XHR对象
这里有一个非常重要的地方,就是
当浏览器接收到Web服务器的响应后,会开始填充XHR对象的属性,主要的如下:
一般通过
检测的代码如下:
不要依赖
上面的代码在同步发送请求验证和获取返会的数据是没有任何问题的。但是当我们发送异步请求的时候确实会出现问题,因为我们不知道服务端的
其实在ajax在向Web服务器发送请求的时候,会有一个readyState属性来检测XHR对象的
每当
必须在调用
实例代码如下:
这里也只是简单的实例,如果想要详细的了解jQuery中ajax的使用。可以参考Jquery的官方文档。
中文文档(点击转到)
英文文档(点击转到)
1.原生js的Ajax请求的方式
由上面的图我们大致的知道了ajax访问后端数据的一个过程。最重要的就是检测浏览器,创建XMLHttpRequest对象的过程:
代码如下:
/* 判断是否支持XMLHttpRequest */ function createXHR() { if (typeof XMLHttpRequest != "undefined") { return new XMLHttpRequest(); } else if (typeof ActiveXobject != "undefined") { if (typeof arguments.callee.activeXString != 'string') { var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"], i, len; for (i = 0, len = versions.length; i < len; i++) { try { new ActiveXObject(versions[i]); arguments.callee.activeXString = versions[i]; break; } catch (ex) { console.log(ex); } } } return new ActiveXObject(arguments.callee.activeXString()); } else { throw new Error('no XHR') } }
此处分别是根据浏览器是否支持
XMLHttpRequest对象来判断是否是IE还是非IE,然后来创建响应的对象。
当XHR对象
open()的时候,此时并没有向Web服务器发送HTTP请求,而是当
send()的时候,XHR对象才向Web服务器发送请求。
xhr.send('');
这里有一个非常重要的地方,就是
send的参数为
null。
send()方法接收一个参数,需要作为请求主体发送的数据。如果不需要作为请求主体发送数据,则必须传入null,因为这个参数对于某些浏览器是必须的。
当浏览器接收到Web服务器的响应后,会开始填充XHR对象的属性,主要的如下:
responseText作为响应的主体被返回的文本
responseXML如果响应的内容类型为
text/xml或者
application/xml这个属性中将包含着响应数据的
XML
DOM文档
status响应的HTTP状态
statusTextHTTP状态的说明
一般通过
XHR.status属性值为
200表示成功的标志。此时可以获取
responseText和
responseXML的值。当
XHR.status==304(响应是有效的)的时候,说明文件没有被修改,可以直接使用浏览器缓存的版本。
检测的代码如下:
if (xhr.status >= 200 && xhr.status <= 300 || xhr.status == 304) { console.log(xhr.responseText); } else { console.log(xhr.responseText); }
不要依赖
responseText,因为在跨浏览器处理的时候这个属性获取的值是不可靠的。
上面的代码在同步发送请求验证和获取返会的数据是没有任何问题的。但是当我们发送异步请求的时候确实会出现问题,因为我们不知道服务端的
Response在什么时候反回。那么我们该怎么办呢?
其实在ajax在向Web服务器发送请求的时候,会有一个readyState属性来检测XHR对象的
请求/响应过程的当前活动阶段,值的列表如下:
0未初始化。尚未调用
open()方法
1启动。已经调用
open()方法,但是尚未调用
send()方法
2发送。已经调用
send()方法。但是还没有接收到响应。
3接收。已经接收到部分的响应数据。
4完成。已经接收到全部的响应数据,而且已经在客户端可以使用了。
每当
XHR.readyState的属性值发生变化,都会触发一次
onreadystatechange事件。通常我们只对
XHR.readyState==4的时候感兴趣(这时数据已经全部就绪)。
必须在调用
open()之前指定
onreadystatechange事件处理程序才能够保证夸浏览器的兼容性。
实例代码如下:
var xhr = new createXHR(); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if (xhr.status >= 200 && xhr.status <= 300 || xhr.status == 304) { console.log(xhr.responseText); //console.log(xhr.) //document.createElement() creatNode('script'); creatNode('img'); } else { console.log(xhr.responseText); } } } xhr.open('GET', 'test.js', true); xhr.send('');
2.jQuery发送Ajax的方式
参考jquery的文档,使用jquery来发送ajax请求比原生的js简单很多。如下代码:2.1GET方式
$.ajax({ type: "GET", url: "test.js", dataType: "script" });
2.2POST方式
$.ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); } });
这里也只是简单的实例,如果想要详细的了解jQuery中ajax的使用。可以参考Jquery的官方文档。
中文文档(点击转到)
英文文档(点击转到)
相关文章推荐
- js切割数字
- 【从0到1学Web前端】javascript中的ajax对象(一) 分类: JavaScript 2015-06-24 10:18 754人阅读 评论(1) 收藏
- 关于写接口 FastJson 输出json结果集 大小写问题
- 实现一个JavaScript模块化加载器
- {jsp 循环显示list内容}
- chrome 控制台js调试与断点调试
- 四种解析JSON技术比较
- js获取客户端浏览器信息
- JSP模板继承功能实现
- EL JSTL OGNL
- js小结
- 许多js框架或js库的min版本是怎么做出来的?
- JScrollPane中添加JPanel不出现滚动条
- 为什么都反对XML而支持使用json呢?
- XML在数据传输哪些方面会比JSON有优势,在哪些领域更加适合?
- JS只能输入数字,数字和字母等的正则表达式
- JSON 语法
- OC-Json文件解析-Json网址学习
- 【跨域】#001 JSONP原理解析【总结】
- js