Ajax那些事儿

一、Ajax是什么？

       Ajax的全称：Asynchronous JavaScript and XML（异步的JavaScript和XML）

      Ajax 是一种在 XML，HTML，CSS 和 JavaScript 的帮助下创建更好，更快和更具交互式 Web 应用程序的新技术。它不是某种编程语言，而是一种在无需重新加载整个网页的情况之下，能够更新部分网页的技术。通过在后台跟服务器进行少量的数据交换，网页就可以实现异步局部更新。

二、为什么要使用Ajax技术

        在AJAX出现之后，网页都是同步的，用户体验感低；AJAX出现之后，实现了客户端与服务端的异步交互，如用户填写邮箱地址时，客户端就向服务端发送请求，同时服务器进行处理和响应，不会耽误用户的时间，用户可以继续下面的工作，而且及时向服务端发送请求、接收响应并在客户端显示响应。

三、什么是XMLHttpRequest对象？

       XMLHttpRequest是Ajax技术的关键，是与服务器进行异步交互的
JavaScript 对象，可以实现后台和服务器数据的交换，并且实现对网页进行部分的更新。（异步请求，部分刷新）

[b]XMLHttpRequest
方法
[/b]1、abort()

取消当前请求。

2、getAllResponseHeaders()

返回整套 HTTP 头字符串。

3、getResponseHeader( headerName )

返回指定 HTTP 头的值。

4、open( method, URL, async, userName, password )

  指定请求的方法，URL 以及其他可选属性。

"method"参数可以是 "GET"，"POST" 或者 "HEAD" 中的一个值。 "async" 参数指定该请求是否应该异步处理。"true" 意味着脚本处理发生在 send() 方法之后而不必等待响应，而 "false" 意味着继续脚本处理之前脚本要等待响应，默认值为"true"。

5、send( content )

 向http服务器发送请求，当请求方法为GET时，可以不用传递参数；如果为POST时，需要传递参数；

6、setRequestHeader( label, value )

给 HTTP 头添加一个标签/值对进行发送，当send方法成功后才可调用该方法

7、setResponseHeader()

单独指定请求的某个http头，如果已经存在已此名称命名的http头，则覆盖之。此方法必须在open方法后调用。

XMLHttpRequest 属性1、onreadystatechange
一个用于事件的事件处理程序，每个状态变化时都会触发。2、readyState（XMLHTTP请求成功时readyState===4）        定义了 XMLHttpRequest 对象的当前状态。       
0 请求还未初始化，在 XMLHttpRequest 对象创建之后，但是在我们调用 open() 方法之前。       
1 请求已经建立open() 方法之后，但是在调用 send() 之前。       
2 请求已经发送。在我们调用 send() 之后。       
3 请求正在处理。在浏览器建立与服务器的通信之后，但是在服务器完成响应之前。       
4 请求已经完成。在请求完成以及响应数据已经完全从服务器接受之后。

3、responseText返回响应字符串，       XMLHTTP尝试将响应信息解码为Unicode字符串，XMLHTTP默认将响应数据的编码定为UTF-8。4、responseXML 返回响应的 XML 数据。       这个属性返回一个 XML 文档对象，我们可以使用 W3C DOM 节点树方法和属性检查并解析它。5、status 返回状态数字（比如 404 表示 "Not Found" 或者 200 表示 "OK"）。 HTTP状态码由3位数字构成，其中首位数字定义了状态码的类型：
1**：信息类，表示收到WEB浏览器请求，正在进一步的处理中；
2**：成功，表示用户请求被正确接收，理解和处理；
3**：重定向，表示请求没有成功，客户必须采取进一步的动作；
4**：客户端错误，表示客户端提交的请求有错误，例如：404 NOT FOUND,意味着请求中所引用的文档不存在；
5**：服务器错误，表示服务器还能完成对请求的处理。
6、statusText返回状态字符串（比如 "Not Found" 或者 "OK"）

四、Ajax客户端的操作步骤及实战

• 触发一个客户端事件。
• 创建一个
XMLHttpRequest 对象。
• 配置
XMLHttpRequest 对象。
• 使用
XMLHttpRequest 对象创建一个到 Web 服务器的异步请求。
• Web
服务器返回包含 XML 文档的结果。
• XMLHttpRequest
对象调用函数处理结果。
• 更新
HTML DOM。

1）触发一个客户端事件

当监听事件发生时触发一个客户端事件，即一个JavaScript函数作为事件被调用。

方法一：

函数 validateUserId() 被映射为 id 为 "userid" 的表单输入字段的 onkeyup 事件的事件处理程序。

方法二：

document.getElementById("keyword").onkeyup = function() { //监控鼠标离开文本框事件

        //函数内容

}

2)创建一个
XMLHttpRequest 对象

因为IE5、IE6或更早的版本还没有XMLHttpRequest对象为了很好地兼容IE5、IE6或更早的版本，可以这样实现：

var request;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();    //IE7+,Firefox,Chrome……
}else{
request = new ActiveXObject("Microsoft.XMLHTTP");//IE5、IE6或更早的版本
}

也可以这样实现：

var AjaxRequest; // 缓存 XMLHttpRequest 对象
function AjaxFunction(){
try{
// Opera 8.0+, Firefox, Safari
AjaxRequest = new XMLHttpRequest();
}catch (e){
// IE 浏览器
try{
AjaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
AjaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
// 错误处理
alert("Your browser broke!");
return false;
}
}}}

3）配置 XMLHttpRequest 对象、发起异步请求、调用函数处理响应和更新部分网页

<pre name="code" class="javascript">document.getElementById("keyword").onblur = function() { //监控鼠标离开文本框事件
var request = new XMLHttpRequest();
request.open("GET", "server.php?number=" + document.getElementById("keyword").value);
request.send();
request.onreadystatechange = function() {
if (request.readyState===4) {
if (request.status===200) {
document.getElementById("searchResult").innerHTML = request.responseText;//XMLHttpRequest对象的responseText属性
} else {
alert("发生错误：" + request.status);
}
}
}
}

五、Ajax服务端的操作步骤及实战



        从客户端获取学生ID之后，如果学生ID输入错误，则提示“请输入正确的学号”；如果在数据库中已经存在该学生ID，则提示“学号已存在！”；如果学生ID正确且数据库中不存在重复的，则提示“学号正确！”

<span style="font-family:FZLanTingHei-L-GBK;"><?php</span>
$model = M("student");
$stu_id = I('param.stu_id');
if(IS_GET){//判断请求方法是否为”GET“
$length = strlen($stu_id);
                if ($length!=10 || !isset($_GET["stu_id"]) || empty($_GET["stu_id"])) {
                echo "请输入正确的学号";
                return;
}
$where = array('stu_number' => $stu_id);
//通过模型类获取指定学生ID
$student_info = $model->where($where)->select();
if($student_info!=null){
echo '学号已存在！';
}else{
echo '学号正确！';
}
}

}