AJAX的简单基础

7-31 208 views

1、AJAX

  • 异步的javascript和XML——Asychronous Javacript and XML
  • 一种创建交互式网页应用的网页开发技术

 

2、原理

  • XHR对象发送Request请求给服务器
  • 服务器返回response响应给XHR对象

 

3、普通使用

创建XHR对象,例如:

  • <script>
  • function createXML(){
  • var XMR = null;
  • if(window.XMLHttpRequest){  //支持IE7+,Firefox,Chrome,Opera,Safari等浏览器
  • XHR = new XMLHttpRequest();
  • }else if(window.ActiveXObject){//支持IE5/6浏览器
  • XHR = new ActiveXObject('Microsoft.XMLHTTP');
  • }}
  • </script>

利用XHR发送请求

  • open('请求方式','url','同步/异步');//true->异步,false->同步
  • send(null/参数);//参数的写法:k1=v1&k2=v2...

判断返回状态码,获取相关数据

  • xhr.onreadystatechange = function(){
  • if(xhr.status == 200 && xhr.readyState == 4){
  • 相关的响应操作语句;
  • }}

 

4、XHR详细探讨

详细属性

  • status:服务器的返回状态码,例如:200,403,404...
  • statusText:服务器的返回状态码描述,例如:OK/FORBIDDEN/NOT FOUND
  • readyState:XMLHttpRequest对象自身的状态码,值为0~4(4为请求完毕)
  • onreadystatechange:事件属性,绑定当此XHR对象的状态发生变化时激发的函数
  • responseText:服务器响应的主体信息,body信息
  • responseXML:JS接收XML对象并解析该内容

详细方法

  • open('请求方式','url','同步/异步');//true->异步,false->同步
  • send(null/参数);//参数的写法:k1=v1&k2=v2...
  • setRequestHeader(key.value);//设置请求的头信息
  • Abort:忽略,不要再进行下去了,到此为止
  • getReqponseHeader:获取响应的某个头信息
  • getAllReqponseHeaders:获取响应的所有头信息

同/异步

  • 同步:按顺序执行,一步接一步;
  • 异步:通过状态吗回到原来位置执行,不影响之后的代码执行。

返回值类型

  • 普通文本/xml文档/json格式等

 

欢迎留言