【Day13】ajax的方法和属性

来源：互联网发布：sql语句建立table 主键编辑：程序博客网时间：2024/05/16 01:04

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;//定义变量用来装XMLHttpRequestfunction 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 + "×tamp=" + 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 = "<font color='red'>" + xmlHttp.responseText + "</font>";      //还是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

0 0