ajax

来源：互联网发布：天地知我心儿的作品编辑：程序博客网时间：2024/05/21 17:44

一、Ajax是什么

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

二、为什么要使用Ajax技术

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

三、什么是XMLHttpRequest对象？

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

XMLHttpRequest 方法
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或更早的版本，可以这样实现：

[javascript] view plain copy print?

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

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

也可以这样实现：

[javascript] view plain copy print?

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;
}
}}}

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 对象、发起异步请求、调用函数处理响应和更新部分网页

[javascript] view plain copy print?

document.getElementById("keyword").onblur = function() { //监控鼠标离开文本框事件
var request = new XMLHttpRequest();
//配置 XMLHttpRequest 对象
request.open("GET", "server.php?number=" + document.getElementById("keyword").value);
//发起到服务器的异步请求
request.send();
//XMLHttpRequest 对象调用函数处理结果。
request.onreadystatechange = function() {
if (request.readyState===4) {
if (request.status===200) {
document.getElementById("searchResult").innerHTML = request.responseText;
//更新 HTML DOM
} else {
alert("发生错误：" + request.status);
}
}
}
}

document.getElementById("keyword").onblur = function() { //监控鼠标离开文本框事件var request = new XMLHttpRequest();<span style="font-family:FZLanTingHei-L-GBK;color:#222222;font-size:11pt;font-style:normal;font-variant:normal;">              </span>//配置 XMLHttpRequest 对象       request.open("GET", "server.php?number=" + document.getElementById("keyword").value);<span style="font-family:FZLanTingHei-L-GBK;color:#222222;font-size:11pt;font-style:normal;font-variant:normal;"><span style="font-family:FZLanTingHei-L-GBK;color:#222222;font-size:11pt;font-style:normal;font-variant:normal;">             </span></span> //发起到服务器的异步请求       request.send();<span style="font-family:FZLanTingHei-L-GBK;color:#222222;font-size:11pt;font-style:normal;font-variant:normal;"><span style="font-family:FZLanTingHei-L-GBK;color:#222222;font-size:11pt;font-style:normal;font-variant:normal;">              </span></span>//XMLHttpRequest 对象调用函数处理结果。       request.onreadystatechange = function() {if (request.readyState===4) {if (request.status===200) { document.getElementById("searchResult").innerHTML = request.responseText;                                //更新 HTML DOM} else {alert("发生错误：" + request.status);}} }}

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

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

[php] view plain copy print?

<?php
$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 '学号正确！';
}
}
}

0 0