Ajax第一阶段学习

最近在学习ajax，下面整理了一下学习的内容，希望对大家有用，若有不当的地方，欢迎指正！ 先来看看为什么要用ajax，也就是同步和异步是什么：

同步和异步

同步的意思就是客户端提交表单，发起请求后需要一直等待服务器端的响应，收到服务器端的响应后需要重新载入页面。 而有了ajax，则可进行异步交互，比如不会提交整个表单后等待服务器响应再刷新页面，而是填写的过程中，通过ajax的机制，就可以把已经填写的部分提交给服务器，服务器进行处理，而这个过程中可以继续填写后面的内容，服务器发送回响应只会刷新页面的部分内容（利用JavaScript操作DOM进行局部刷新），而不是重新载入整个页面。其实就是为客户机（网页中常为JavaScript）代码提供了一种发送HTTP请求的方式。通常提交请求都是以表单的形式发送，获取响应要刷新整页，而ajax则是按需发送，只刷新返回的数据。

传统的Ajax的基本操作步骤

Ajax指异步的JavaScript和XML，JS无需等待服务器响应，而是在继续执行脚本内容，响应就绪后对响应进行处理。若是同步，则JS代码会收到服务器的响应后再继续执行。ajax是通过XMLHttpRequest对象在客户端和服务器端进行数据交换的。

1. 创建XMLHttpRequest对象

script type='text/javascript'>
   function CreateXMLHTTP() {
       var objXmlHttp;
       // 检测MSXMLHTTP版本，为了兼容IE各个版本
       var activeKey = new Array('MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP');
       if (window.ActiveXObject) {
           for (var i = 0; i < activekey.length;="" i++)="">
               try {
                   objXmlHttp = new ActiveXObject(activeKey[i]);
                   if (objXmlHttp != null)
                       return objXmlHttp;
               }
               catch (error) {
                   throw new Error('您的浏览器版本过低，请更新浏览器');
               }
           }
       }
       else if (window.XMLHttpRequest) {
           objXmlHttp = new XMLHttpRequest();
       }
       return objXmlHttp;
   }
script>

2. 向服务器发送请求 

objXmlHttp.open(method,url,async);
objXmlHttp.send();

• method：请求的类型有GET或者POST;

• url:文件在服务器上的位置；

• async:true（异步）或false(同步).

3.服务器响应 

在收到响应后，响应的数据会自动填充XHR对象的属性： 

• XHR.responseText：服务器返回的文本数据 

• XHR.responseXML：服务器返回的XML格式的数据 

• status：服务器返回的状态码。响应的HTTP状态： 
  

• - 200: “OK”，响应成功返回 
  - 304：请求的资源未被修改，可使用浏览器中的缓存版本 
  - 404:未找到页面 

• statusText：HTTP状态文本说明 

• 同步的时候应当检查status的值后来决定下一步的操作：
  

if(xhr.status>=200 && xhr.status300 || xhr.status=304){
   //do something
}else{
   alert('request was unsuccessful: '+xhr.status);
}

4. 客户端响应事件onreadystatechange 

XMLHttpRequest对象的三个重要属性：

• onreadystatechange:存储函数（或函数名），每当readystate属性改变时，就会调用该函数。

• readystate：有5个状态，0：请求未初始化，1：服务器连接已建立，2：请求已接收，3：请求处理中，4：请求已完成，且响应已就绪。

• status:有200：“OK”，404：未找到页面。

xhr.onreadystatechange=function(){
   if(xhr.readyStatus==4){
       if(xhr.status>=200 && xhr.status300 || xhr.status==304){
           //do something
       }else{
           alert('request was unsuccessful: '+xhr.status);
       }
   }
};

5.终止异步 

xhr.abort()：调用该方法取消异步请求，XHR对象会停止触发事件，并且不再允许访问任何与响应有关的对象属性。 在终止请求后，应对XHR对象释放引用。

HTTP头部

浏览器在发送XHR请求的同时也会默认发送一些头部信息，浏览器能够显示的字符集（Accept-charset）、当前页面设置的任何Cookie等。也可以自定义发送信息，通过调用XHR.setRequestHeader(header,value)向请求添加头部。该方法应当放在open之后send之前。 XHR对象的getResponseHeader()和getAllResponseHeaders()可用于获取响应的头部信息

1.GET请求 

常用于向服务器查询某些信息，可将查询字符串参数追加到url末尾。必须对查询字符串进行encodeURIComponent()编码，具体来说必须对参数名和参数值都进行编码才能附加到url后面。 向现有url追加查询字符串参数：

function addURLPara(url,name,value){
   url += (url.indexOf('?') == -1 ? '?':'&');
   url += encodeURIComponent(name)+'='+encodeURIComponent(value);
   return url;
}

2.POST请求 

用于向服务器发送应当被保存的数据（修改服务器端数据），数据是请求的主体。 使用POST方式： 
---无法使用缓存文件（get通常会使用缓存？） 
---向服务器发送大量数据 
---发送包含未知字符的用户输入 
    在send方法中传入要发送的数据（字符串或文档），表单数据序列化，通过XHR发送到服务器：

function submitData() {
   var xhr = createXHR();
   xhr.onreadystatechange = function () {
       if (xhr.readyState == 4) {
           if (xhr.status >= 200 && xhr.status <>300 || xhr.status == 304) {
               //do something
           } else {
               alert('request was unsuccessful: ' + xhr.status);
           }
       }
       ;
   }
   xhr.open('post', 'url', true);
   xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); //表单提交时的内容类型，如果提交的是表单数据必须要写这    个                                                                            
   var form = document.getElementById('user-info');
   xhr.send(serialize(form));//表单序列化
}

使用该方式必须设置自定义请求头部信息Content-Type，以说明请求的内容类型。这样服务器就会根据请求的内容类型来解析表单中的数据。 在通过post方式请求表单中，在open和send之间，要添加

request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”) 

如果不设置content-type头部，那么发送给服务器的数据就不会出现在$_POST超级全局变量中。

传送的数据格式

 Ajax传输的数据格式有HTML、XML、JSON三种常见数据格式，下面简单汇总下每种数据格式的优缺点。

1.HTML 

• HTML由一些普通文本组成。如果服务器通过XMLHTTPRequest发送HTML，文本将存储在responseText属性中。

• 从服务器端发送的HTML的代码在浏览器端不需要用JavaScript进行解析。

• 可以直接使用innerHTML属性把服务器传输过来的HTML文本插入到页面中。

2.XML

• XML是一种通用的数据格式

• 不必把数据强加到已定义好的格式中，而是要为数据自定义合适的标记

• 利用DOM可以完全掌控文档

3.JSON

• JSON（JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。JSON是JavaScript原生格式。

• JSON的规则很简单：对象是一个无序的键值对的集合。一个对象以“{” 左括号开始，以“}”右括号结束。每个“名称”后跟一个“：”(冒号)；键值对之间用“，”（逗号分隔 ）

$.ajax({
   type: 'post',
   url: 'aaa/bbb.do',
   contentType: 'application/json;charset=utf-8',
   data: '{'name': 'uname', 'age': 18}',
   success: function (data) { //返回json结果
       alert(data);
   }
});

• JSON只是一种文本字符串。它被存储在responseText属性中

• 函数eval会把一个字符串当作它的参数。然后这个字符串会被当作JavaScript代码来执行。因为JSON的字符串就是由JavaScript代码构成的所以它本身是可执行的

var data = new FormData();
data.append(“key”,”value”);
'name':value
var jsondata='{'staff':[{'name':'anna','age':20},{'name':'mike','age':10},{'name':'lily','age':30}]}'; //注意这个json字符串要放到同一行;服务器端的返回的数据应该写成这样一个json对象字符串
var jsonobj=eval('('+jsondata+')'); //eval使用这种方式解析
alert(jsonobj.staff[0].name);