Ajax-XMLHttpRequest对象

最新推荐文章于 2022-07-29 03:19:10 发布

王永俊

最新推荐文章于 2022-07-29 03:19:10 发布

阅读量901

点赞数

分类专栏： BS jQuery+ajax

本文链接：https://blog.csdn.net/wj8023/article/details/38323629

版权

BS 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

jQuery+ajax

6 篇文章 0 订阅

订阅专栏

简单了解一下Ajax之后，我们来详细的学习一下Ajax的基础——XMLHttpRequest对象。

写在前面：

XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分

进行更新。它的作用：

在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求数据
在页面已加载后从服务器接收数据
在后台向服务器发送数据

下面我们详细学习一下XMLHttpRequest对象的使用过程。

一：创建XMLHttpRequest对象。

<span style="font-size:18px;">var xmlHttp;
function createXMLHttpRequest()｛
   if(window.ActiveXObject)
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
   else if(window.XMLHttpRequest)
   {
      xmlHttp = new XMLHttpRequest();
 ｝</span>

注：由于各浏览器之间存在差异，所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和

其它浏览器之间。因为最早的IE5是通过ActiveXObject对象引入的，所以需要检测是否支持XMLHttpRequest对象。

二：注册回调函数并设置发生请求的方法：

<span style="font-size:18px;">function requestway()｛
  //调用创建XMLHttpRequest方法
  createXMLHttpRequest();
  //文件位置
  var url ="servlet/ClientIdValidateServlet?clientId=" + trim(field.value);
  //调用open方法，设置为get提交
  xmlHttp.open("GET",url, true);
  //注册回调函数
  xmlHttp.onreadystatechange=ShowResult();
  //get提交不需要参数
  xmlHttp.send(null);
 /**
     //post方式交互  
        //3.设置和服务器端交互的相应参数  
        xmlhttp.open("POST","servlet/ClientIdValidateServlet",true);  
        //设置post请求头信息  
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
        //4.设置服务器端发送的数据，启动和服务器端的交互  
        xmlhttp.send("clientId=" + trim(field.value));  
**/
}</span>

注：我们需要注意的是get提交和post提交的区别：

post相比，get更简单快捷，并且在大部分情况下都能用，然而，在以下情况中，请使用post请求。

无法使用缓存文件
向服务器发送大量数据（post没有数据量限制）
发送包含未知字符的用户输入时。post比get更稳也更可靠。

三：定义回调函数，用于处理服务器返回的信息。

<span style="font-size:18px;">function ShowResult(){
   //判断和服务器是否交互完成，是否返回数据
    if(xmlHttp.readyState == 4) {
       //和服务器交互完成
      if(xmlHttp.status == 200) {
if(trim(xmlHttp.responseText) != "") {
document.getElementById("spanClientId").innerHTML= "<font color='red'>" + xmlHttp.responseText +"</font>"
}else{
document.getElementById("spanClientId").innerHTML= "";
}
    }else {
alert("请求失败，错误码=【" + xmlHttp.status + "】");
}
}

}</span>

注：我们需要了解XMLHttpRequest对象的readyState属性。每当readyState属性值改变时，就会出发

onreadystatechange事件。readyState属性值从 0 到 4 发生变化。

0:请求未初始化

1:服务器连接已建立

2:请求已接收

3:请求处理中

4:请求已完成，且响应已就绪