浅谈Ajax

1、关于AJAX的名字

ajax 的全称是 Asynchronous JavaScript and XML ，其中， Asynchronous 是异步的意思，它有别于传统 web 开发中采用的同步的方式。

2、AJAX工作原理

Ajax的原理就是:通过javascript的方式，将前台数据通过xmlhttp对象传递到后台，后台在接收到请求后，将需要的结果，再传回到前台，这样就可以实现不需要页面的回发，页是数据实现来回传递，从页实现无刷新。
Ajax的原理简单来说，实际上就是通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

我们可以看出，XMLHttpRequest对象完全用来向服务器发出一个请求的，它的作用也局限于此，但它的作用是整个ajax实现的关键，我们可以把服务器端看成一个数据接口，它返回的是一个纯文本流，当然，这个文本流可以是XML格式，可以是Html，可以是Javascript代码，也可以只是一个字符串。这时候，XMLHttpRequest向服务器端请求这个页面，服务器端将文本的结果写入页面，这和普通的web开发流程是一样的，不同的是，客户端在异步获取这个结果后，不是直接显示在页面，而是先由javascript来处理，然后再显示在页面。

3、AJAX所包含的技术

大家都知道 ajax 并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。

1.使用CSS和XHTML来表示。

2.使用DOM模型来交互和动态显示。

3.使用XMLHttpRequest来和服务器进行异步通信。

4.使用javascript来绑定和调用。

4、XmlHttpRequest对象

XMLHttpRequest对象的属性：

onreadystatechange 每次状态改变所触发事件的事件处理程序。
　 responseText 从服务器进程返回数据的字符串形式。
　 responseXML 从服务器进程返回的DOM兼容的文档数据对象。
　　status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
　　status Text 伴随状态码的字符串信息
　　readyState 对象状态值

　　　　0 (未初始化)对象已建立，但是尚未初始化（尚未调用open方法）

　　　　1 (初始化)对象已建立，尚未调用send方法

　　　　2 (发送数据) send方法已调用，但是当前的状态及http头未知

　　　　3 (数据传送中)已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误

　　　　4 (完成)数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

XMLHttpRequest对象的方法：

abort 取消现行的HTTP请求
getAllResponseHeaders 取回所有的HTTP头信息
getResponseHeaders 从响应实体中取回一个HTTP头信息
open() 打开HTTP请求
send() 发送一个HTTP请求给服务器并接收一个响应
setRequestHeaders 设置用户自定义的HTTP头的名称和值

5、操作HttpRequest对象

a、创建HttpRequest对象

//非IE浏览器创建XMLHttpRequest对象
    if (window.XmlHttpRequest) {
        xmlhttp = new XmlHttpRequest();
    }

    //IE浏览器创建XMLHttpRequest对象
    if (window.ActiveXObject) {
        try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e) {
            try {
                xmlhttp = new ActiveXObject("msxml2.XMLHTTP");
            }
            catch (ex) { }
        }
    }

b、打开与发送HttpRequest对象

open(method,url,async,userid,pwd)

method表示方法，两个取值为GET和POST
url表示发送对象的物理地址或网络地址
async表示操作是同步执行还是异步执行，true为同步执行，false为异步执行
userid为用户名称
pwd为用户密码

用send()方法来发送请求：xmlHttp.send()

c、请求XML文档


xmlHttp.open("GET","ch-9.xml","false");
xmlHttp.send();
xmlObj=xmlHttp.responseText;或者xmlObj=xmlHttp.responseXML;

d、向服务器发送XML


xmlHttp.open("POST","ch-9.ASP","false");
xmlHttp.send(DomObj);

6、HttpRequest请求检测

a、检测请求状态

使用readyState属性来判断服务器是否正确响应了该请求。

例如：


document.write("连接状态："+ xmlHttp.readyState +"<br/>");
xmlHttp.open("GET","false");
document.write("连接状态："+ xmlHttp.readyState +"<br/>");
xmlHttp.send();
document.write("连接状态："+ xmlHttp.readyState +"<br/>");

b、检测服务器状态

使用status和statusText分别表示服务器响应状态代码和状态说明文本

例如：


xmlHttp.open("POST","ch-11.ASP","false");
xmlHttp.send(DomObj);
document.write("服务器状态："+ xmlHttp.status + xmlHttp.statusText +"<br/>");
xmlDom=HttpObj.responseXML;

c、onReadyStateChange属性

指定一个当readyState属性变化时的事件处理程序。

原文地址：https://www.jb51.cc/ajax/546640.html

相关推荐