ajax

同步与异步的区别

           同步：客户端发送请求到服务器，当服务器返回响应前，客户端都处于卡死状态

           异步：客户端发送请求到服务器端，无论服务器是否响应，客户端都可以随意做其他事情，不会被卡死

ajax的运行原理

         当页面发起请求，会将请求发送给浏览器内核中的ajax引擎，ajax会提交申请到服务端，在这段时间里，客户端可进行任意操作，直到服务器将数据返回给ajax引擎，触发设置的事件，从而执行自定义的js代码完成某种页面功能

 js原生的ajax技术

       步骤：

           1.创建ajax引擎对象：所有操作都要通过引擎对象

                  var  xmlHttp=new xmlHttpRequest()

            2.绑定监听：监听服务器是否已经返回数据

               xmlHttp.onreadystatechange=function(){

                          5.接收服务器响应的数据，并进行判断和处理

                               if(xmlHttp.readystate==4&&xmlHttp.status==200){

                                           var res=xmlHttp.responseText

                             解释：

                                    readystate:

                                               0:请求未初始化

                                               1：服务器连接已建立

                                               2：请求已连接

                                               3：请求处理中

                                               4：请求已完成，且已响应

                                status:

                                            200:ok

                                           404:未找到页面

                            }

               }

              3.绑定地址

                        xml.open("get|post","提交地址"，“是否异步（true|false）”)

               4.发生请求

                         xmlHttp.send()

 

 

JQuery的ajax技术

             常用的有三种方式，第三种最方便

            方式一：.$.get(url,[data],[callback],[type])

             方式二：$.post(url,[data],[callback],[type])

          参数说明：

                   url:代表请求的服务器地址

                   data:代表发送给服务端的数据

                   callback:代表服务器端成功响应所触发的函数

                   type:服务器端所返回的函数

$.get(
    "/项目名/文件名",
    {“name”:"zhangsan", "age":23},
    function(data){//data代表服务器端响应的数据
        alert(data.name);
    }
);

          方式三：$.ajax({optional:value1,option2:value2,........});

                常用的option如下：

                       async:是否异步，true代表异步

                       data:发送给服务端的参数，建议使用json格式

                     datatype:服务器端返回的数据类型

                      success:成功响应执行的函数，值为function

                    type:post|get

                     url:请求服务端的地址