Ajax简介

lAjax的技术的产生

•Ajax被认为是(AsynchronousJavaScript and XML的缩写）。

•现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.
* 同步交互和异步交互：
* 同步交互：客户端向服务器端发送请求，服务器端处理并响应的整个过程，客户端不能做任何其他事情的模式
* 异步交互：客户端向服务器端发送请求，服务器端处理并响应的整个过程，客户端可以做任何其他事情的模式
* Ajax的定义：允许浏览器与服务器通信而无须刷新当前页面的技术（不是严谨定义）
* Ajax的特点：
* 并不适用于任何场景
* 性能比较高
* Ajax是解决B\S模型下的异步交互
* Ajax的核心对象：XMLHttpRequest对象
* AJAX包含的技术：Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest等
* Ajax的缺点：
* 考虑浏览器兼容问题
* 搞不清楚数据是否是新的还是旧的
* 浏览器的前进和后退功能失效
* 对流媒体支持不太好
* 扩展：使用WEB技术(Ajax)开发移动应用
* XMLHttpRequest对象：
* 非W3C标准
* 考虑浏览器兼容问题
* 创建代码是固定的（面试题：该对象是如何创建,代码）

创建XMLHttpRequest的三种方法

//创建一个XMLHttpRequest对象 ,利用此对象与服务器进行通信 是AJAX技术的核心/////////////////////////////////////////////////////////////////////////////////////////////////////////////function ajaxFunction(){   var xmlHttp;   try{ // Firefox, Opera 8.0+, Safari        xmlHttp=new XMLHttpRequest();    }    catch (e){   try{// Internet Explorer         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");      }    catch (e){      try{         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");      }      catch (e){}      }    }return xmlHttp; }/////////////////////////////////////////////////////////////////////////////////////////////////////////////function getXMLHttpRequest(){ var xmlHttpReq=null;  if (window.ActiveXObject) {//IE浏览器创建XMLHttpRequest对象 xmlHttpReq = new ActiveXObject("MSXML2.XMLHTTP.3.0"); }else if(window.XMLHttpRequest){  xmlHttpReq = new XMLHttpRequest(); }     return xmlHttpReq;}//////////////////////////////////////////////////////////////////////////////////////////////////////////////** * 获取XmlHttpRequest对象 */function getXMLHttpRequest() {var xmlHttpReq=null;if (window.XMLHttpRequest) {//Mozilla 浏览器xmlHttpReq = new XMLHttpRequest();}else {if (window.ActiveXObject) {//IE 浏览器try {xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");}catch (e) {try {//IE 浏览器xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");}catch (e) {}}}}return xmlHttpReq;} 

* 实现Ajax步骤：
        * 创建XMLHttpRequest对象
        * 服务器端向客户端进行响应（注册监听）
            * XMLHttpRequest对象的onreadystatechange属性：监听服务器端的通信状态
            * readyState 属性表示Ajax请求的当前状态。它的值用数字代表。
                0 代表未初始化。 还没有调用 open 方法
                1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
                2 代表已加载完毕。send 已被调用。请求已经开始
                3 代表交互中。服务器正在发送响应
                4 代表完成。响应发送完毕
            * 常用状态码及其含义：
                404 没找到页面(not found)
                403 禁止访问(forbidden)
                500 内部服务器出错(internal service error)
                200 一切正常(ok)
                304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改 )
        * 客户端与服务器端建立连接
            * open(method,url,asynch)
                * method：请求类型，类似 “GET”或”POST”的字符串。
                    * 如果设置为POST的话，需要设置请求首部信息
                    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                * url：请求路径，可以是绝对路径或相对路径。
                * asynch：表示请求是否要异步传输，默认值为true(异步)。
        * 客户端向服务器端发送请求
            * send()
                * 如果请求类型是GET方式的话，客户端通过send()方法
                  向服务器端发送请求数据，服务器端接收不到
                * 如果请求类型是POST方式的话，客户端通过send()方法
                  向服务器端发送请求数据，服务器端可以接收
        * 请求类型GET方式与POST方式的区别：
            * open()方法的第一个参数：GET还是POST
            * send()方法：GET不能发送参数，POST可以发送参数
            * 如果是POST的话，需要设置首部信息
    * Ajax异步交互，客户端接收服务器端的响应数据：
        * XMLHttpRequest对象的responseText属性：文本(HTML)格式

get方式

<form action="" enctype="application/x-www-form-urlencoded">          <input type="button" name="ok" id="ok" value="测试服务器连接">      </form>

test.js

window.onload = function(){document.getElementById("ok").onclick = function(){//1 创建XMLHttpRequest对象var xhr = ajaxFunction();/* * 2 客户端与服务器端建立连接 *  * XMLHttpRequest对象的open()方法 * * method：请求类型，类似 “GET”或”POST”的字符串。 * * url：请求路径，可以是绝对路径或相对路径。 * * asynch：表示请求是否要异步传输，默认值为true(异步)。 */xhr.open("GET","../testServlet?timeStamp="+new Date().getTime()+"&c=9",true);/* * 3 客户端向服务器端发送请求 *  * XMLHttpRequest对象的send()方法 * * 如果请求类型是GET方式的话，客户端通过send()方法向服务器端发送请求数据，服务器端接收不到 * * 即使send()方法不能发送请求数据，但是该步骤不能省略。xhr.send(null); */xhr.send("a=7&b=8");//xhr.send(null);/* * 4 服务器端向客户端进行响应 *  * XMLHttpRequest对象的onreadystatechange属性：监听服务器端的通信状态 *  * readyState 属性表示Ajax请求的当前状态。它的值用数字代表。0 代表未初始化。 还没有调用 open 方法1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用2 代表已加载完毕。send 已被调用。请求已经开始3 代表交互中。服务器正在发送响应4 代表完成。响应发送完毕 *  * 常用状态码及其含义：404 没找到页面(not found)403 禁止访问(forbidden)500 内部服务器出错(internal service error)200 一切正常(ok)304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改 ) */xhr.onreadystatechange = function(){//alert(xhr.readyState);//alert(xhr.status);if(xhr.readyState==4){if(xhr.status==200||xhr.status==304){var data = xhr.responseText;alert(data);}}}}function ajaxFunction(){   var xmlHttp;   try{ // Firefox, Opera 8.0+, Safari        xmlHttp=new XMLHttpRequest();    }    catch (e){   try{// Internet Explorer         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");      }    catch (e){      try{         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");      }      catch (e){}      }    }return xmlHttp; }}

post方式

window.onload = function(){document.getElementById("ok").onclick = function(){var xhr = ajaxFunction();xhr.onreadystatechange = function(){alert(xhr.readyState);if(xhr.readyState==4){if(xhr.status==200||304){var data = xhr.responseText;alert(data);}}}xhr.open("POST","../testServlet?timeStamp="+new Date().getTime(),true);//如果请求类型是POST方法的话，需要设置请求首部信息xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xhr.send("a=7&b=8");}function ajaxFunction(){   var xmlHttp;   try{ // Firefox, Opera 8.0+, Safari        xmlHttp=new XMLHttpRequest();    }    catch (e){   try{// Internet Explorer         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");      }    catch (e){      try{         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");      }      catch (e){}      }    }return xmlHttp; }}