Ajax

第一章

1. Ajax-同步和异步
在Ajax出现之前是同步操作

当ajax出现以后，就有了异步

2. 创建XMLHttpRequest对象
var request;//游览器的兼容问题
if(window.XMLHttpRequest){
request=new XMLHttpRequest();//IE7+,Firefox,chrome,Opera,Safari…
} else{
request=new ActiveXObject(“Microsoft.XMLHTTP”);//IE6,IE5
}

3.HTTP是一种无状态协议（没有记忆）
一个完整的HTTP请求过程，通常有下面7个步骤:
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
请求地址:login.php
从Host到Accept-Language:请求头
最后一个就是请求体
GET:一般用于信息获取，查询，不用GET请求修改新建
使用URL传递参数（发送的信息对任何客户都是可见）
对所发送信息的数量也有限制，一般在2000个字符
POST:一般用于修改服务器上的资源（表单发送数据，数据不可见）
对所发送信息的数量无限制

一个HTTP响应一般由三部分组成:
1.一个数字和文字组成的状态码，用来显示请求是成功还是失败
2.响应头，响应头也和请求头一样包含许多有用的信息，例如服务器类型、日期时间、内容类型和长度等
3.响应体，也就是响应正文

HTTP状态码由3位数字构成，其中首位数字定义了状态码的类型:
1XX:信息类，表示收到Web游览器请求，正在进一步的处理中
2XX:成功，表示用户请求被正确接收,理解和处理例如:200 OK
3XX:重定向，表示请求没有成功，客户必须采取进一步的动作
4XX:客户端错误，表示客户端提交的请求有错误，例如：404 NOT Found,意味着请求中所引用的文档不存在
5XX:服务器错误，表示服务器不能完成对请求的处理:如500

4. XHR发送请求
方法：
.open(method,url,async)
method:发送请求方法
url:请求地址（相对/绝对）
async:请求同步/异步（同步false,异步true）
.send(string)

例子：
request.open(“GET”,“get.php”,true);
request.send();
形式二:
request.open(“POST”,“create.php”,true);
request.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);//设置头信息
request.send(“name=王二狗&sex=男”);

5. XHR取得响应
responseText:获得字符串形式的响应数据
responseXML:获得XML形式的响应数据
status和statusText:以数字和文本形式返回HTTP状态码
getAllResponseHeader():获取所有的响应报头
getResponseHeader():查询响应中的某个字段的值

readyState属性
0:请求未初始化，open还没有调用
1:服务器连接已建立，open已经调用了
2.请求已接收，也就是接收到头信息了
3.请求处理中，也就是接收到响应主体了
4.请求已完成，且响应已就绪，也就是响应完成了

var request=new XMLHttpRequest();
request.open(“GET”,“get.php”,true);
request.send();//因为请求方法是get,所以不需要发送参数，因为参数在url里面
request.onreadystatechange=function(){
if((request.readyState=4)&&(request.status=200))
{
//做一些事情request.responseText
}
}

6. JSON基本概念
JSON:JavaScript对象表示法(JavaScript Object Notation)
JSON是存储和交换文本信息的语法，类似XML。它采用键值对的方式组织，易于人们阅读和编写，同时也易于机器解析和生成
JSON是独立于语言的，也就是说不管什么语言，都可以解析json,只需要按照json的规则来就行

JSON的长度和 xml格式比起来很短小
json读写的速度更快
json可以使用JavaScript内建的方法直接进行解析，转换成Javascript对象，非常方便

JSON语法规则
JSON数据的书写格式是:名称/值对
名称/值对组合中的名称写在前面，值对写在后面，中间用冒号隔开，比如"name":“郭靖”
json的值可以是下面这些类型:
数字（整数或浮点数），比如123,1.23
字符串（在双引号中）
逻辑值（true或false）
数组（在方括号中）
对象（在花括号中）
null
{
“staff”:[{“name”:“洪七”,“age”:70},
{“name”:“郭靖”,“age”:35},
{“name”:“黄蓉”,“age”:30}]
}
JSON解析
eval和JSON.parse
在代码中使用eval是很危险的！特别是用它执行第三方的JSON数据（其中可能包含恶意代码）时，尽可能使用JSON.parse()方法解析字符串本身，该方法还可以捕捉JSON中的语法错误。
JSON格式化网站
http://jsonlint.com

7. 用jQuery实现Ajax
jQuery.ajax([settings])
.type:类型，“POST"或"GET”,默认为"GET"
.url:发送请求的地址
.data:是一个对象，连同请求发送到服务器的数据
.dataType:预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包MIME信息来智能判断，一般我们采用json格式，可以设置为"json"
.success:是一个方法，请求成功后的回调函数。传入返回后的数据，以及包含成功代码的字符串
.error:是一个方法，请求失败时调用此函数。传入XMLHttpRequest对象
例子:
1.GET请求形式:
KaTeX parse error: Expected '}', got 'EOF' at end of input: …e.php?number="+("#keyword").val(),
dataType:“json”,
success:function(data){
if(data.success){
$("#searchResult").html(data.msg);
}else{
$("#searchResult").html(“出现错误:”+data.msg);
}
},
error:function(jqXHR){
alert(“发生错误:”+jqXHR.status);
}
})
2.POST请求形式:
KaTeX parse error: Expected '}', got 'EOF' at end of input: …{ name:("#staffName").val(),
number:KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲staffNumber").v…("#staffSex").val(),
job:$("#staffJob").val(),
},
success:function(data){
if(data.success){
$("#createResult").html(data.msg);
}else{
$("#createResult").html(“出现错误:”+data.msg);
}
},
error:function(jqXHR){
alert(“发生错误:”+jqXHR.status);
}
})

8. 跨域

当进行跨域的时候，会产生如下错误代码:

JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。什么是跨域呢，简单地理解就是因为Javascript同源策略的限制，a.com域名下的js无法操作b.com或是c.a.com域名下的对象。
处理跨域—XHR2
HTML5提供的XMLHttpRequest Level2已经实现了跨域访问以及其他的一些新功能
IE10以下的版本都不支持
在服务端做一些小小的改造即可:
header(‘Access-Control-Allow-Origin:*’);//支持全部的网站
header(‘Access-Control-Allow-Methods:POST,GET’);//支持方法:POST/GET

8. 解决nodejs+express+ajax的跨域问题
router.all(’’, function(req, res, next) {
res.header(“Access-Control-Allow-Origin”, "");
res.header(“Access-Control-Allow-Headers”, “X-Requested-With”);
res.header(“Access-Control-Allow-Methods”, “PUT,POST,GET,DELETE,OPTIONS”);
res.header(“X-Powered-By”, ’ 3.2.1’)
//这段仅仅为了方便返回json而已
res.header(“Content-Type”, “application/json;charset=utf-8”);
if(req.method == ‘OPTIONS’) {
//让options请求快速返回
res.sendStatus(200);
} else {
next();
}
});
9. nodejs+express+ajax的客户端

    <script type="text/javascript">
        $(function() {
            $(".myForm").on('click', function() {  //添加点击事件
                $.ajax({
                    type:"POST",
                    url:"http://localhost:3010/form/process_post",
                    dataType:"json",
                    data:{
                        name:$("input:nth-of-type(1)").val(),
                        passwords:$("input:nth-of-type(2)").val(),
                    },
                    success:function(data){
                        console.log(data.result.message.name);
                        
                    },
                    error:function(jqXHR){
                        alert("发生错误:"+jqXHR.status);
                    }
                })
               
                
            })
        })
    </script>    

9. nodejs+express+ajax的服务端
router.post(’/process_post’, function(req, res, next) {
var response={
“name”:req.body.name,
“passwords”:req.body.passwords
}
console.log(response.name);
res.json({“result”:{message:response}}); //发送json格式
res.end();
});

10. 使用ajaxSetup()方法设置全局Ajax默认选项
使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值，设置完成后，后面的Ajax请求将不需要再添加这些选项值，它的调用格式为：

jQuery.ajaxSetup([options])或$.ajaxSetup([options])

可选项options参数为一个对象，通过该对象设置Ajax请求时的全局选项值。

11. 使用ajaxStart()和ajaxStop()方法
ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数，ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式为：

$(selector).ajaxStart(function())和$(selector).ajaxStop(function())