【Ajax】学习总结

AJAX

Asynchronous JavaScript and XML（异步的Javascript和XML）

不是某种编程语言， 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

1、同步和异步

客户端 请求  等待  页面载入 

服务器端 处理 响应 

异步 AJAX

2、XMLHttpRequest 对象来进行异步操作，后台和服务器之间交换数据。

（1）运用HTML和CSS来实现页面，表达信息；

（2）应用XMLHttpRequest和web服务器进行数据的异步交换

（3）运用JavaScripts操作DOM，实现动态局部刷新；

3、XMLHttpRequest对象 XHR

var request;

if(window.XMLHttpRequest){

     request=new XMLHttpRequest ( );// IE6 以上版本

}else{

     request=new ActiveXObject("Microsoft.XMLHTTP");//IE5 and IE6.

}

4、HTTP请求

请求过程：

1、建立TCP连接

2、WEB浏览器想Web服务器发送请求命令

3、Web浏览器发送请求头信息

4、Web服务器应答

5、Web服务器发送应答头信息

6、Web服务器向浏览器发送数据

7、Web服务器关闭TCP连接

一个HTTP请求一般由四部分组成：

1、HTTP请求的方法或动作，比如是GET还是POST请求

2、正在请求的URL

3、请求头，包含一些客户端环境信息，身份验证信息等

4、请求体，也就是请求正文，请求正文中可以包含客户提交的查询字符串信息，表单信息等等。

GET和POST

GET：一般用于信息获取；使用URL传递参数；对所发送信息的数量有限制，一般在20000个字符。

          注：用URL传递参数，所以内容都是可见的（查询，获取）幂等

POST：一般用于修改服务器上的资源；对所发送信息的数量无限制。（发送表单数据，新建，修改，删除等操作）

5、XMLHttpRequest发送请求

方法：

open(method,url,async)

setRequestHeader（）

send(string)//把请求发送到服务器 

XMLHttpRequest取得响应

responseText：获得字符串形式的响应数据

responseXML：获得XML形式的响应数据

status和statusText：以数字和文字形式返回HTTP状态码

getAllResponseHeader（）：获取所有的响应抱头

getResponseHeader（）：查询响应中的某个字段的值

readyState属性：

0：请求未初始化，open还没有调用

1：服务器链接已建立，open已经调用了

2：请求已接收，也就是接收到头信息了

3：请求处理中，也就是接收到响应主体了

4：请求已完成，且响应已就绪，也就是响应完成了。

onreadystatechange事件来监听

var request=new XMLHttpRequest( );

request.open("GET","get.php",true);

request.send();

request.onreadystatechange=function(){

     if(request.readyState===4&&request.status===200){

         //do something 

     }

}

6、JSON

JSON是存储和交换文本信息的语法，类似XML。采用键值对来组织，易于阅读和编写，同时也易于及其解析和生成。

书写格式：名称/值对 如 “name”：“郭靖”

JSON字符串：

{

     “staff：”[

          {"name":"jose","age":23},

          {"name":"simply","age":23}

          ]

}

JSON解析

eval和JSON.parse

尽量使用JSON.parse( )方法来解析JSON

JSONLint ，在线校验JSON工具。

7、用jQuery实现Ajax

jQuery.ajax([settings])

type:"POST""GET"

url：发送请求的地址

data：是一个对象，连通请求发送到服务器的数据

dataType：一般采用json格式

success：是一个方法，请求成功后的回调函数。传入返回后的数据，以及包含成功代码的字符串

error：是一个方法，请求失败后的回调函数

示例：

 <script>

    $(document).ready(function(e) {

        $("#search").click(function(){

            $.ajax({

                type:"GET",

                url:"server.php?number="+$("#Id").val(),

                dataType:"json",

                success: function(data){

                    if(data.success){

                        $("#searchResult").html(data.msg);                       

                        }else{

                        $("#searchResult").html("出现错误："+data.msg);

                            }

                    },

                error: function( jqXHR ){

                    alert("发生错误："+jqXHR.status);

                    }

                });

            });

    $("#save").click(function(){

            $.ajax({

                type:"POST",

                url:"server.php",

                dataType:"json",

                data:{

                    name:$("#employeeName").val(),

                    number:$("#employeeId").val(),

                    sex:$("#sex").val(),

                    position:$("#employeePosition").val()

                    },

                success: function(data){

                    if(data.success){

                        $("#createResult").html(data.msg);                       

                        }else{

                        $("#createResult").html("出现错误："+data.msg);

                            }

                    },

                error: function( jqXHR ){

                    alert("发生错误："+jqXHR.status);

                    }

                });

            })

    });

</script>

8.跨域

处于安全考虑，JavaScript不允许跨域调用其他页面的对象。

解决跨域----JSONP

处理跨域----XHR2

HTML5 提供的XMLHttpRequest Level2

个人总结：

这两天在看AJAX的书和视频，看JavaScript高级程序设计的时候，我没看懂，然后硬着头皮看，后来又看了jQuery与AJAX，说实话，我也没看懂，呵呵呵。我心想看不懂咋整啊，于是我就看视频，把慕课网上的视频又看了一遍，然后跟着做例子，现在觉着明白一点了，起码东西做出来了。

所以，编程的话必须要自己手编才行。

另外，就是自己写jQuery时，CSS选择器老写不对，经常忘记加#。以后要细心一点。这周有时间，还是再把选择器好好看看。加油~