关于Ajax的小结

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

Ajax

使用浏览器内置的一个对象(XmlHttpRequest)向服务器发送请求,服务器返回xml数据或者是文本数据给浏览器,然后在浏览器端,使用这些数据更新部分页面,整个过程,页面无仸何的刷新。


Ajax引擎(即XmlHttpRequest对象),首先为该对象注册一个监听器(该监听器是一个事件处理函数,对状态改变事件(readyStatechange)迚行监听)


Ajax技术特点

1) 页面无刷新

2) 不打断用户的操作,用户的体验好。

3) 按需获取数据,浏览器与服务器之间数据的传输量减少。

4) 是一个标准技术,不需要下载任何的揑件。

5) 可以利用客户端(浏览器)的计算能力。


Ajax代码位置 <script> this is ajax </script>


Ajax编程

step1

获得XmlHttpRequest对象(ie浏览器不支持)

function getXmlHttpRequest(){
    var xhr = null;
    if((typeof XMLHttpRequest)!='undefined'){
        xhr = new XMLHttpRequest();
    }else {
        xhr = new ActiveXObject('Microsoft.XMLHttp');
    }
    return xhr;
}

step2

使用XmlHttpRequest向服务器发送请求

1.发送get请求

var xhr = getXmlHttpRequest();
//get方式,参数添加地址,true表示异步
xhr.open('get','check_ser',true);
//注册监听器,改变产生了readystatechange事件,f1函数处理
xhr.onreadystatechange=f1;
//调用send方法,请求菜真正发送
xhr.send(null);

2.发送post请求

var xhr = getXmlHttpRequest();
xhr.open('post','check_username.do',true);
//必须添加一个消息头content-type
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.onreadystatechange=f1;
xhr.send('username=zs');

step3

在服务器端,处理请求

step4

在监听器端,处理请求

xhr.onreadystatechange=f1;
function f1(){
    //编写相应的处理代码
}

或者

xhr.onreadystatechange=function(){
    //编写相应的处理代码
    if(xhr.readyState == 4){
        //只有readyState等亍4,xhr才完整地接收到了服务器返回的数据。
        //获得文本数据
        var txt = xhr.responseText;
        //获得一个xml dom对象。
        var xml = xhr.responseXML;
        //dom操作、更新页面
    }
};
原文链接:https://www.f2er.com/ajax/165654.html

猜你在找的Ajax相关文章