ajax详细解读

前端之家收集整理的这篇文章主要介绍了ajax详细解读前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1 什么是ajax?

ajax,全称为:asynchronous javascript and xml(异步的javascript和xml),是一种用来改善用户体验的技术,其本质是利用浏览器内置的一种特殊对象(XMLHttpRequest)异步(既发送请求时,浏览器不会销毁当前页面用户可以继续在当前页面做其他操作)的向服务器发送请求,并且利用服务器返回的数据(不再是一个完整的页面,只是部分数据,一般使用文本或者xml返回),来部分更新当前页面。使用ajax技术后,页面无刷新,并且不打断用户的操作。

2 传统的web应用

3 使用ajax后的web应用

4 ajax的编程步骤

step1:获取ajax对象

由于各版本浏览器的兼容性问题,所以获取ajax对象需要区分IE浏览器和非IE浏览器

    var xhr = null;
    if(window.XMLHttpRequest){
        xhr  = new XMLHttpRequest();//非IE
    }else {
        xhr  = new ActiveXObject('Microsoft.XMLHttp');//IE
    }

step2:发送请求

xhr.open('请求方式','请求地址','异步还是同步');
    请求方式:get/post
    请求地址:如果是get请求,请求参数需要添加到请求地址的后面
    异步还是同步:true表示异步请求,false表示同步请求(ajax发出请求时,浏览器会锁定当前页面,直到ajax请求处理完毕)。
    例子:xhr.open('get','send.do?username=tom',true);

step3:编写服务器代码

服务器一般不需要返回完整的代码,只需要返回部分数据,比如一个简单的字符串、xml、json等。

step4:编写监听器

xhr.onreadystatechange=function (){
    if(xhr.readyState == 4){
        //获得服务器返回的数据
        var txt = xhr.responseText;
        //dom操作
    }
};
xhr.send(null);

5 ajax的get方式和post方式

get方式:

window.onload = function(){
    var xhr = null;
    if(window.XMLHttpRequest){
        xhr  = new XMLHttpRequest();//非IE
    }else {
        xhr  = new ActiveXObject('Microsoft.XMLHttp');//IE
    }

    xhr.open('get',true);
    xhr.onreadystatechange=function (){
    if(xhr.readyState == 4){
        //获得服务器返回的数据
        var txt = xhr.responseText;
        //dom操作
    }
    };
    xhr.send(null);
}

post方式:
因为按照http协议的要求,如果发送的post请求,请求数据包里面,应该有一个消息头 content-type。但是,ajax对象默认没有,所以,需要调用setRequestHeader方法

window.onload = function(){
    var xhr = null;
    if(window.XMLHttpRequest){
        xhr  = new XMLHttpRequest();//非IE
    }else {
        xhr  = new ActiveXObject('Microsoft.XMLHttp');//IE
    }

    xhr.open('get','send.do',true);
    xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
    xhr.onreadystatechange=function (){
    if(xhr.readyState == 4){
        //获得服务器返回的数据
        var txt = xhr.responseText;
        //dom操作
    }
    };
    xhr.send('username=' + $F('username'));
}

6 发送get请求的编码问题

ie浏览器内置的ajax对象,对中文参数使用gbk编码,而其它浏览器(firefox,chrome)使用utf8编码。服务器端默认使用iso-8859-1去解码。

解决方案:
step1,让服务器对get请求中的参数使用指定的编码
格式进行解码。
比如,对于tomcat,可以修改 conf/server.xml
URIEncoding=”utf-8”
step2,对请求地址,使用encodeURI函数进行统一的
编码(utf-8) (encodeURI(请求地址))

7 发送post请求的编码问题

所有浏览器内置的ajax对象都会使用utf-8进行编码。

解决方案:
request.setCharacterEncoding(“utf-8”);

8 jquery对ajax的支持

$.ajax({
    type: "POST",url: 'send.do',dataType: "json",//json字符串
    success: function(data) {//返回的数据

    }
});

猜你在找的Ajax相关文章