在JS中使用Ajax

最新推荐文章于 2024-06-19 11:25:09 发布

weixin_33920401

最新推荐文章于 2024-06-19 11:25:09 发布

阅读量684

点赞数 3

文章标签： java javascript ViewUI

原文链接：https://my.oschina.net/itblog/blog/204729

版权

为什么80%的码农都做不了架构师？>>>

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-type
xhr.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