博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
在JS中使用Ajax
阅读量:6574 次
发布时间:2019-06-24

本文共 2117 字,大约阅读时间需要 7 分钟。

  hot3.png

1. 什么是ajax

    ajax=asynchronous javascript and xml,异步的javascript和xml。为了解决传统的web应用(当用户点击提交之后,浏览器会销毁当前的页面,然后等待服务器返回一个新的页面)“等待-响应-等待”的弊端而创建的一种技术。该技术的实质是:利用浏览器内置一个特殊的对象(XMLHttpRequest,该对象属于BOM模型)异步地(浏览器不会销毁当前页面,用户可以继续做其他的操作)向服务器发送请求,服务器送回部分的数据(XML或者text的形式,非完整的页面),在浏览器端可以使用这些数据部分更新页面。在整个过程当中,浏览器无刷新。

2. 如何获得ajax对象

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

//获得XMLHttpRequest对象function getXmlHttpRequest(){    var xhr=null;    if(window.XMLHttpRequest){       //非IE浏览器       xhr=new XMLHttpRequest();    }else{       //IE浏览器       xhr=new ActiveXObjext('Microsoft.XMLHttp');    }    return xhr;}

3. ajax的属性

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

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

     responseXML:获得服务器返回的XML

     readyState:ajax在与服务器进行通讯时的状态值,该值一共有5个,分别是0,1,2,3,4。当值为4时,表示ajax对象已经获得了服务器返回的所有的数据,此时,才可以使用responseText,responseXML获得服务器返回的数据。

  0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)。

  1 (初始化) 对象已建立,尚未调用send方法。

  2 (发送数据) send方法已调用。

  3 (数据传送中) 已接收部分数据。

  4 (响应结束)接收了所有的数据。

     status:获得状态码,如404,500,200,302等

4. Ajax编程

4.1. 获得ajax对象

var xhr=getXmlHttpRequest();

4.2. 使用ajax对象发送请求

   方式一:get请求    

//open(请求方式,请求地址,同步还是异步)//true表示异步,ajax对象发送请求的同时,用户可以对当前页面做其他的操作。//false表示同步,ajax对象发送请求的同时,或锁定当前页面,用户只能等待服务器的相应xhr.open(‘get’,’login.do?uname=zs’,’true’);//注册一个监听器,触发该事件的时候,由函数fun1来处理xhr.onreadystatechange=fun1;//请求参数要添加到请求地址后面xhr.send(null);

    方式二:post请求

xhr.open('post','check_username.do',true);//必须添加一个消息头content-typexhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xhr.onreadystatechange=fun1;//要将请求参数放到send方法里面默认情况下,xhr对象生成的请求数据包没有content-type消息头,需要使用setRequestHeader添加这样一个消息头xhr.send('username=zs');

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

4.4. 在监听器当中,编写相应的处理代码    

function fun1(){   //只有readyState=4,xhr才获得了服务器返回的所有的数据   if(xhr.readyState==4){       //获得服务器返回的数据       var txt=xhr.responseText;       var xml=xhr.responseXML;       //dom操作,更新页面       ......   }}

5. 编码问题

       a.链接地址当中包含了中文,如何处理?

    如果连接地址包含了中文,浏览器都会对中文按UTF-8进行编码,服务器默认情况下,会使用iso-8859-1进行解码

       解决方式:通知服务器按正确的编码格式进行解码。

           对于tomcat,可以修改/conf/server.xml文件,添加下面的代码:

           URIEncoding=”utf-8”。修改完后,记得重新启动服务器。

       b.链接地址中包含了中文参数值,如何处理?

           例如:<a href=”some.do?name=花花”></a>

 

转载于:https://my.oschina.net/itblog/blog/204729

你可能感兴趣的文章