AJAX 的原始写法

最新推荐文章于 2022-01-03 09:27:52 发布

马道长

最新推荐文章于 2022-01-03 09:27:52 发布

阅读量553

点赞数

分类专栏： ajax 文章标签： ajax web应用异步

本文链接：https://blog.csdn.net/MYC19891010/article/details/41677841

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

(1)什么是ajax?

(asynchronousjavascript and xml)异步的javascript和xml，为了解决传统的web应用"等待-响应-等待"的弊端而创建的一种技术。

该技术的实质是，利用浏览器内置的一个特殊的对象(XMLHttpRequest，该对象属于BOM模型)异步地向服务器发送请求，服务器

送回部分的数据(xml或者text的形式)，在浏览器端，可以使用这些数据部分更新页面。在整个过程当中，浏览器无刷新。

(2)ajax对象

ajax对象没有标准化,要获得该对象，需要区分浏览器。

                var xmlhttprequest =null;
           if(window.XMLHttpRequest){
                 //非ie浏览器
                 xmlhttprequest = newXMLHttpRequest();
           }else{
                 //ie浏览器
                 xmlhttprequest = newActiveXObject('Microsoft.XMLHttp');
           }

ajax对象的属性:

onreadystatechange:注册监听器(即给ajax对象绑订一个事件处理函数)

responseText:获得服务器返回的文本。

responseXML:获得服务器返回的xml数据。

readyState:ajax在与服务器进行通讯时的状态值，

一共有5个，分别是0,1,2,3,4。当值为4时，表示

ajax对象已经获得了服务器返回的所有的数据。

此时，才可以使用responseText,responseXML

获得服务器返回的数据。

status:获得状态码

(3)编程

方式一: get请求

a、,获得ajax对象

b、使用ajax对象发送请求

//open(请求方式,请求地址,同步还是异步);

//true:异步,ajax对象发送请求的同时，用户可以对当前页面做其它的操作。

//false:同步，ajax对象发送请求的同时,会锁定

//当前页面，用户只能等待服务器的响应。

xhr.open('get','check_username.do?username=zs',true);

//注册一个监听器

xhr.onreadystatechange=f1;

//请求参数要添加到请求地址后面。

xhr.send(null);

c、服务器处理请求,只需要返回部分的数据给客户端。

d、在监听器当中，编写相应的处理代码

  <span style="white-space:pre">		</span>     functionf1(){
                            //只有readyState等于4,xhr才获得了服务器返回的所有的数据
                            if(xhr.readyState== 4){
                                  //获得服务器返回的数据
                                  vartxt = xhr.responseText;  //或者responseXML
                                  //dom操作：更新页面
                                  ...
                            }
                      }

方式二: post请求

a、获得ajax对象

b、发送请求

xhr.open('post','check_username.do',true);

//post请求，要将请求参数放到send方法里面。

//默认情况下，xhr对象生成的请求数据包

//没有content-type消息头，需要使用

//setRequestHeader添加这样一个消息头。

xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

xhr.onreadystatechange=f1;

xhr.send("username=zs");

例子：

function a(){
<span style="white-space:pre">	</span>//获得ajax对象
   <span style="white-space:pre">	</span>var xmlhttprequest;
   <span style="white-space:pre">	</span>if(window.XMLHttpRequest){
        <span style="white-space:pre">	</span>//针对FireFox，Mozillar，Opera，Safari，IE7，IE8 
       <span style="white-space:pre">		</span>xmlhttprequest = new XMLHttpRequest();
       <span style="white-space:pre">		</span>if(xmlhttprequest.overrideMineType){
          <span style="white-space:pre">	</span>       //针对某些特定版本的mozillar浏览器的BUG进行修正 
           <span style="white-space:pre">	</span>     xmlhttprequest.overrideMineType("text/xml");
      <span style="white-space:pre">	</span> <span style="white-space:pre">	</span>}
   <span style="white-space:pre">	</span>}else if (window.ActiveXObject) {
          //针对IE
       <span style="white-space:pre">		</span>var activeName =["XSXML2.XMLHTTP","Microsoft.XMLHTTP"];
      <span style="white-space:pre">		</span>for (i = 0; i < activeName.length; i++) {
            <span style="white-space:pre">	</span>    try {
           <span style="white-space:pre">		</span>//取出一个控件名进行创建，如果创建成功就终止循环 
                 <span style="white-space:pre">	</span>//如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建
               <span style="white-space:pre">	</span> <span style="white-space:pre">	</span>xmlhttprequest = newActiveXObject(activeName[i]);
                <span style="white-space:pre">	</span>break;
           <span style="white-space:pre">	</span>    } catch (e) {
               
                    }
                }
        }
   if (xmlhttprequest === undefined || xmlhttprequest === null) {
       alert("xmlhttprequest对象创建失败！");
   }else{
       this.xmlhttp = xmlhttprequest;
}
 
<span style="white-space:pre">			</span>//发请求
                       var uri ='check_username.do?username=' + $F('username');
                       xhr.open('get',encodeURI(uri),true);
                       //注册监听器(绑订一个事件处理函数)
                       xhr.onreadystatechange=function(){
                            //只有ajax对象的readyState的值为4的时候，
                            //才能够正确地获得服务器返回的数据。
                            if(xhr.readyState ==4){
                                  //状态码是200,表示服务器处理正确。
                                  if(xhr.status== 200){
                                       //获得服务器返回的文本
                                       var txt =xhr.responseText;
                                       //dom操作
                                       $('username_msg').innerHTML= txt;
                                  }else{
                                       $('username_msg').innerHTML= '验证出错';
                                  }
                            }else{
                                  //xhr的readyState属性值是0,1,2,3
                                  //即xhr对象正与服务器进行通讯
                                  $('username_msg').innerHTML= '正在验证...';
                            }
                       }
                       //如果是get请求，请求参数要添加到请求地址后面
                       xhr.send(null);
}