1、Ajax是Asynchronous（[ə'sɪŋkrənəs） JavaScript XML的简写，不是一门新技术，而是对现有技术的综合利用。这一技术能够向服务器请求额外数据而无需刷新页面，带来了更好的用户体验
2、Ajax技术的核心是XMLHttpRequest对象（简称XHR），这是由微软首先引入的一个特性。在XHR出现之前，Ajax式的通信必须借助一些hack手段来实现，大多数是使用隐藏的框架或内嵌框架。
3、XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步的方式从服务器取得更多的信息，意味着用户单击后，可以不必刷新页面也能获取新数据。也就是说可以使用XHR对象取得新数据，然后再通过DOM将新数据插入到页面中
4、虽然Ajax名字中有XML的成分，但是呢，Ajax通信与数据格式无关，这种技术就是无须刷新页面即可从服务器取得数据，但不一定是XML数据
二、操作：原生ajax和jQuery中封装的ajax 1、原生ajax：ajax作用：发送请求（设置请求setRequest） 接收响应(getResponse)
A、ajax原生方式发送请求：Ajax中最重要也是最固定的部分就是http请求。
1) 建立连接： （IE7及以上版本都支持XMLHttpRequest）
1 var xhr = new XMLHttpRequest(); //创建异步请求对象
2) Get请求：格式必须是（url?name1=value1&name2=value2）
1 xhr.open("get","01-register.php?name="+name);//初始化异步get请求 2 xhr.send(null); //与服务器建立连接
3) Post请求
1 xhr.open('post','01-XMLHTTPRequest-test.php');//请求报文行 2 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); /*post请求设置请求头*/ 3 xhr.send('name=rose&age=20'); //请求报文体
4) get和post请求的区别：
★get不需要设置请求头，而post需要设置请求头
★get的数据传递通过url进行，而post的数据在send方法中传递
B、ajax原生方式接收响应：1 /*监听服务器的响应*/ 2 xhr.onreadystatechange=function(){ 3 /*判断当前的响应是否成功 1.服务器做出了响应 2.响应的结果是正确的*/ 4 if(xhr.status==200 && xhr.readyState==4){ 5 var result=xhr.responseText; 6 console.log(result); //输出从服务器中获取到的数据 7 //接下来就可以对数据进行相应的处理了 8 } 9 };
C、处理响应数据：1 /*监听*/ 2 xhr.onreadystatechange=function(){ 3 if(xhr.status==200 && xhr.readyState==4){ /*判断状态*/ 4 var result; 5 /*获取响应报文中的Content-Type*/ 6 var ct=xhr.getResponseHeader("Content-Type"); 7 /*判断Content-Type,进行数据的解析*/ 8 if(ct.indexOf("xml") != -1){ 9 result=xhr.responseXML; 10 } 11 else if(ct.indexOf("json") !=-1){ 12 result=JSON.parse(xhr.responseText); 13 } 14 else{ 15 result=xhr.responseText; 16 } 17 /*调用回调函数--委托--代理*/ 18 success && success(result); 19 } 20 };
2、jQuery中封装的ajax1 $.ajax({ 2 type: 请求方式(get/post), 3 url: "register.php", 4 data: 发送请求数据, 5 beforeSend:function(){返回false可以取消本次ajax请求}, 6 success:function(result){ 成功响应后调用 }, 7 error:function(err){ 错误响应时调用 }, 8 complete:function(){ 响应完成时调用(包括成功和失败) } 9 });
jQuery中提供了专门的方法来序列化表单：
1 $('form').serialize(): //序列化表单(即格式化key=val & key=val);
三、响应我们需要监听服务器的响应状态，然后对从服务器中获取的数据做相应的处理。
1) onreadystatechange是JavaScript事件中的一种，用于监听XMLHttpRequest的状态
2) readystate：响应状态，返回XMLHTTP请求的当前状态
readyState 状态 状态说明 (0)未初始化