ajax最重要的三点,AJAX中最重要的对象是什么

满意答案

rcmpdpte

推荐于 2017.10.10

采纳率：59%    等级：12

已帮助：3372人

AJAX 基本概念

Asynchronous Javascript and XML

一、典型流程

1、 客户端触发异步操作

区别于B->S->B的同步提交模式，有等待时间，异步式在客户操作同时又AJAX引擎与服务器交互，更加人性化和快捷

2、 创建新的XMLHttpRequest对象

AJAX技术的核心与服务器交互的类

3、 与Server进行连接

通过send()方法实现

4、 服务器端进行连接处理

必须的

5、 返回包含处理结果的XML文档

其实未必是XML文档，而是字符串TEXT

6、 XMLHttpRequest对象接收处理结果并分析

7、 更新页面

二、原来的流程 browser --àserver --àbrowser 同步的编程模型, 有等待的时间

三 AJAX的流程

四、XMLHttpRequest 对象

1、属性

readystate

0描述一种"未初始化"状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化

1描述一种"发送"状态；此时，代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器

2 描述一种"发送"状态；此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。

3 描述一种"正在接收"状态；此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。

4描述一种"已加载"状态；此时，响应已经被完全接收

responseText 从AJAX引擎中拿出server返回的信息

status AJAX与sever交互成功没有？状态码200表示成功

//-----AJAX BEGIN-----

var xmlHttp;

//定义变量用来装XMLHttpRequest

function createXMLHttpRequest() {

if(window.XMLHttpRequest) {

xmlHttp = new XMLHttpRequest();

//NS FIREFOX 等的初始化XMLHttpRequest实例

} else if(window.ActiveXObject) {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

//MS的流浪器的初始化XMLHttpRequest实例

}

//浏览器大战牺牲的产物，只有这样才能具有垄断地位，不过现在也在趋于标准化W3C出标准也是迟早的问题

function validate() {

//提供DOM模式的入口方法，在事件中调用JAVASCRIPT函数即可进入AJAX引擎

var vUserId = trim(document.getElementById("userId").value);

if(vUserId != "") {

createXMLHttpRequest();

//上面的那个方法~初始化XMLHttpRequest,状态码为0

var url = "user_validate.jsp?userId=" + vUserId + "&timestamp=" + new Date().getTime();

//这里的URL里加入了时间戳，这样就不会提交到同一个页面，避免了IE缓存所产生的一些奇怪的问题，也不用清缓存了

xmlHttp.open("GET", url, true);

//准备提交给服务器进行事务处理，状态码变成2，具体的食物处理可以再user_validate.jsp中经行，不过我觉得提交给SERVERLET更好 在JSP直接out.println("用户已经存在，代码=[" + userId + "]");就可以被捕获我觉得挺奇怪的其实

}

xmlHttp.onreadystatechange=callback;

//当状态码代发生变化的时候调用后面的函数

xmlHttp.send(null);

//提交给服务器进行处理

} else {

document.getElementById("resText").innerHTML = "";

}

}

function callback() {

//状态码改变时调用

if(xmlHttp.readyState == 4) {

//确定了变化的状态，定位是服务器处理完毕

if(xmlHttp.status == 200) {

//确定了处理的结果，是服务器成功处理，不是404，500错误

var resTextSpan = document.getElementById("resText");

//DOM

if(trim(xmlHttp.responseText) != "") {

//获得服务器的响应结果，response以字符串的形式返回(TEXT)

resTextSpan.innerHTML = "" + xmlHttp.responseText + "";

//还是DOM

} else {

resTextSpan.innerHTML = "";

}

} else {

alert("请求失败，错误码=" + xmlHttp.status);

//返回错误信息

}

}

}

//-----AJAX END-----

AJAX引擎的一般步骤

a) 创建Ajax引擎对象XMLHttpReqest

creatXMLHttpRequest();

b) 调用open方法与Ajax引擎建立连接，并告诉Ajax引擎我们的请求方式为get，请求url及采用异步方式

c) 告诉Ajax引擎处理完成后，如何把结果反馈给我们，我们通常指定一个方法句柄，那么Ajax就会调用我们指定的方法，从而就可以得到Ajax引擎返回的数据(这种方式一般称为回调机制)

onreadystatrchange()=function(...)

d) 最后调用send方法把我们步骤b和c设置的参数发送给Ajax引擎(也就是真正的交给Ajax引擎去处理)

实际过程

validate() {

createXMLHttpRequest();

xmlHttp.open("GET", url, true);

xmlHttp.onreadystatechange=function(...);

xmlHttp.send(null);

}

其中响应处理在FUNCTION

事务处理在URL

我自己写的

00分享举报