ajax的详细总结

来源：互联网发布：老米cps淘宝客网站编辑：程序博客网时间：2024/05/16 08:15

之前看过一遍ajax的视频，大概是看的不够认真，看的云里雾里。但是这个内容必须要学会。没办法只好重新看了一遍，发现并没有想象中那么难。茅塞顿开的感觉。
故全面总结下ajax的使用方法。

先上点套话：
ajax的运用：
1.运用HTML和CSS来实现页面，表达信息。
2.运用XMLHttpRequest和web服务器进行数据的异步交换
3.运用JavaScript操作DOM，实现动态局部刷新

同步：用户填写相关信息后一次性提交所有信息，若出现错误信息或者必填数据没填写，需要重新填写或者更正后重新提交，这样耗时，不能实施更正信息，用户体验差。

异步：用户在填写相关信息时，系统会实时的检验数据正确与否，若不符合要求则会实时提示用户，这样用户提交时就不会出现因为填写的数据不准确而失败，需要重新填写的情况。

再看个简单的代码，大致了解下ajax做了什么。

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body><script>    window.onload=function(){        var btn=document.getElementById("btn");        btn.onclick=function(){            //打开浏览器            var xhr=new XMLHttpRequest()            //在地址栏中输入数据            xhr.open("get","test.txt",true);            //提交            xhr.send();            //等待服务器返回内容            xhr.onreadystatechange=function(){                if(xhr.readyState==4){                    alert(xhr.responseText);                }            }        }    }</script><input type="button" value="按我" id="btn" ></body></html>

test.txt

this is my first ajax!

上文中的var xhr=new XMLHttpRequest()相当于创建一个ajax对象，名字为XMLHttpRequest，但是ie6以下不支持XMLHttpRequest，考虑到浏览器的兼容性，将其优化为

     var xhr=null;            if(window.XMLHttpRequest){                xhr=new XMLHttpRequest();            }else{                xhr=new ActiveXObject("Microsoft.XMLhttp");            }

或者

    var xhr=null;    try{        xhr=new XMLHttpRequest();     }catch(e){         xhr=new ActiveXObject("Microsoft.XMLhttp");    }

其中的open方法用法如下：
open(method,url,async)
method：规定HTTP发送请求的方式是get还是post,不区分大小写，一般来说用大写
url：请求地址(相对地址或绝对地址)
async：请求为true则是异步请求，为false则是同步请求，默认是true。异步：非阻塞，前面的代码不会影响后面代码的执行。同步：阻塞，前面的代码影响后面代码的执行。

其中send方法介绍如下：
send（string）:把请求发送到服务器，
如果使用get发送请求，该参数可不填或null，
若使用post发送请求，则需要填写。

下面介绍下剩下几个英文的意思：
readyState:ajax的工作状态
0：请求未初始化，open还没有调用
1：服务器连接已建立，open已经调用了
2：请求已接收，也就是接收到头信息了
3：请求处理中，也就是接收到了响应主体
4：请求已完成，且响应已就绪，也就是响应完成了
responseText：获得字符串形式的响应数据
on readystate change:当readyState改变的时候触发
status：服务器状态，http状态码
1字头：消息
2字头：成功
3字头：重定向
4字头：请求错误
5字头：服务器错误

写到这里，大家差不多可以明白了。ajax就是通过模拟浏览器的状态，从后台获取数据，将获取的数据以js的方式展现在前台想要展现的位置。

下面写个代码演示下：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body><script>    window.onload = function() {        var oBtn = document.getElementById('btn');        oBtn.onclick = function() {            var xhr = null;            try {                xhr = new XMLHttpRequest();            } catch (e) {                xhr = new ActiveXObject('Microsoft.XMLHTTP');            }            xhr.open('get','getNews.php',true);            xhr.send();            xhr.onreadystatechange = function() {                if ( xhr.readyState == 4 ) {                    if ( xhr.status == 200 ) {                        //alert( xhr.responseText );                        var data = JSON.parse( xhr.responseText );                        var oUl = document.getElementById('ul1');                        var html = '';                        for (var i=0; i<data.length; i++) {                            html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';                        }                        oUl.innerHTML = html;                    } else {                        alert('出错了,Err：' + xhr.status);                    }                }            }        }    }</script><input type="button" value="按我按我" id="btn"><ul id="ul1"></ul></body></html>

getNews.php

<?phpheader('content-type:text/html;charset="utf-8"');error_reporting(0);$news = array(    array('title'=>'德国女总理默克尔滑雪时摔倒 骨盆断裂','date'=>'2014-1-6'),    array('title'=>'中日驻英外交官撰文互称对方国家为"伏地魔"','date'=>'2014-1-6'),    array('title'=>'安倍:望与中国领导人会面 中方:你关闭了大门','date'=>'2014-1-6'),    array('title'=>'揭秘台湾驻港间谍网运作 湖北宜昌副市长被查','date'=>'2014-1-6'),    array('title'=>'习近平：嫦娥三号是货真价实的中国创造','date'=>'2014-1-6'),    array('title'=>'习近平：嫦娥三号是货真价实的中国创造','date'=>'2014-1-6'),    array('title'=>'习近平：嫦娥三号是货真价实的中国创造','date'=>'2014-1-6'),    array('title'=>'习近平：嫦娥三号是货真价实的中国创造','date'=>'2014-1-6'),    array('title'=>'习近平：嫦娥三号是货真价实的中国创造','date'=>'2014-1-6'),    array('title'=>'中国长达13年游戏机禁令正式解除 外企可进入','date'=>'2014-1-6'),    array('title'=>'70种证件伴中国人一生:领养老金要办生存证明','date'=>'2014-1-6'),    array('title'=>'德国女总理默克尔滑雪时摔倒 骨盆断裂','date'=>'2014-1-6'),    array('title'=>'中日驻英外交官撰文互称对方国家为"伏地魔"','date'=>'2014-1-6'),    array('title'=>'安倍:望与中国领导人会面 中方:你关闭了大门','date'=>'2014-1-6'),    array('title'=>'揭秘台湾驻港间谍网运作 湖北宜昌副市长被查','date'=>'2014-1-6'),);echo json_encode($news);

下面总结下open(method,url,async) 方法中get和post的区别
上代码：

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><script>window.onload = function() {    var oBtn = document.getElementById('btn');    oBtn.onclick = function() {        var xhr = null;        try {            xhr = new XMLHttpRequest();        } catch (e) {            xhr = new ActiveXObject('Microsoft.XMLHTTP');        }        /*        1.get方法存在缓存问题，所以要在url？后面连接一个随机数，一般是时间戳        2.中文编码存在乱码，要使用编码encodeURI        */xhr.open('get','2.get.php?username='+encodeURI('刘伟')+'&age=30&' + new Date().getTime(),true);        xhr.send();         xhr.onreadystatechange = function()        {        if ( xhr.readyState == 4 ) {            if ( xhr.status == 200 ) {                alert(xhr.responseText );                } else {                    alert('出错了,Err：' + xhr.status);                }            }               }       }}</script></head><body>    <input type="button" value="按钮" id="btn" /></body></html>

由此可见get方法存在缓存和编码乱码问题。

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script>window.onload = function() {    var oBtn = document.getElementById('btn');    oBtn.onclick = function() {        var xhr = null;        try {            xhr = new XMLHttpRequest();        } catch (e) {            xhr = new ActiveXObject('Microsoft.XMLHTTP');        }        xhr.open('post','2.post.php',true);        //post方式，数据放在send()里面作为参数传递        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');//申明发送的数据类型        //post没有缓存问题        //无需编码        xhr.send('username=桔子&age=18');        xhr.onreadystatechange = function() {            if ( xhr.readyState == 4 ) {                if ( xhr.status == 200 ) {                    alert( xhr.responseText );                } else {                    alert('出错了,Err：' + xhr.status);                }            }        }    }}</script></head><body>    <input type="button" value="按钮" id="btn" /></body></html>

由此可见，post方法不存在缓存和乱码问题。
但是在open和send方法中要声明发送的数据类型，即
setRequestHeader方法，不然就会抛出异常

以上为ajax的总结

1 0