Ajax-XMLHttpRequest对象

前端之家收集整理的这篇文章主要介绍了Ajax-XMLHttpRequest对象前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

简单了解一下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没有数据量限制)
  • 发送包含未知字符的用户输入时。postget更稳也更可靠。


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

<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:请求已完成,且响应已就绪


总结:


以上是对XMLHttpRequest对象使用的一个简单介绍,整个流程其实非常简单,而且只需要按步骤来就可以。重点


是我们要了解每步的作用和XMLHttpRequest对象的基本属性方法。大家可以参考学习这个教程:Ajax基础


给大家提个问题:大家理解XMLHttpXMLHttpRequest两者是什么关系?

原文链接:https://www.f2er.com/ajax/164608.html

猜你在找的Ajax相关文章