AJAX

Ajax(Asynchronous Javascript And XML 异步传输+js+xml)

Ajax与cookie

ajax会自动带上同源的cookie，不会带上不同源的cookie
可以通过前端设置withCredentials为true，后端设置Header的方式让ajax自动带上不同源的cookie，但是这个属性对同源请求没有任何影响。会被自动忽略。

withCredentials | MDN
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/', true);
xhr.withCredentials = true;
xhr.send(null);

Ajax请求流程

一、创建XMLHttpRequest对象 let xhr = XMLHTTPRequest（）

二、注册设置回调函数

三、使用OPEN方法与服务器建立连接 xmlHttp.open("get","ajax?name="+ name,true) open() 调用open就可以调用xhr对象发送http请求

四、向服务器端发送数据（send() 使用send方法把请求发送到服务器）

xmlHttp.send(null);如果是POST方式就不为空

五、在回调函数中针对不同的响应状态进行处理

创建 XMLHttpRequest 对象,也就是创建一个异步调用对象
建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息
设置响应 HTTP 请求状态变化的函数
发送 HTTP 请求
获取异步调用返回的数据

function ajax(url, handler){
  var xhr;
  xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
      handler(xhr.responseXML);
    }
  }
  xhr.open('GET', url, true);
  xhr.send();
}

ajax/jsonp返回后台数据

ajax和jsonp可以与后台通信，获取数据和信息，但是又不用刷新整个页面，实现页面的局部刷新

异步执行、局部刷新（ajax可以实现局部刷新，只局部刷新，ajax可以自己发送http请求，不用通过浏览器的地址栏，所以页面整体不会刷新，ajax获取到后台数据，更新页面显示数据的部分，页面局部刷新。）

定义：一种发送http请求与后台进行异步通讯的技术。

原理：实例化xmlhttp对象，使用此对象与后台通信。

jsonp

定义：一种可以实现跨域发送http请求的数据通信格式，可以嵌在ajax中使用。

原理：利用script标签可以跨域链接资源的特性。

<script type="text/javascript">
    function aa(dat){
        alert(dat.name);
    }
</script>
<script type="text/javascript" src="....../js/data.js"></script>

用法一：函数传参

将数据以页面定义的函数的参数的形式传递进去，从而获取数据。

本质上可以将数据拆分，使得数据不用强制保存在同一个域名下。

用法二：利用ajax

$.ajax({
    url:'...../data.js',//可以不是本地域名 
    type:'get',
    dataType:'jsonp',  //jsonp格式访问
    jsonpCallback:'aa'  //获取数据的函数
})
.done(function(data){
    console.log(data.name);
})
.fail(function() {
    alert('服务器超时，请重试！');
});

使用ajax的方法本质上也是script标签可以跨域链接资源，不过jquery为其封装了相同的方法，看起来一样。

以上代码的执行过程为：ajax通过jsonp技术跨域访问data.js文件，通过找到aa()方法将其参数传递给.done方法的data参数执行.done方法。

局限性，必须知道data.js文件的名字定义的方法aa，如果在仅仅知道域名的情况下，需要另外的方法.

用法三

var $input = $("input");
$input.keyup(function () {
    $.ajax({
        url:'https://sug.so.360.cn/suggest?',//请求360搜索的联想数据
        type:'get',
        dataType:'jsonp',  //jsonp格式访问
        data: {word: $input.val()},
    })
    .done(function(data){
        console.log(data);
    })
    .fail(function() {
        alert('服务器超时，请重试！');
    });
})

....
<body>
    <input type="text">
</body>

通过浏览器查看每次输入关键字服务器发送回的数据包，找到js文件中header的地址以及相关的提交数据，发现key为word关键字，因此可以向服务器发送data数据。

服务器返回的数据会自动传给回调的匿名函数的参数data.

ajax的方法：

一、$.ajax({})

1、url 请求地址

2、type 请求方式，默认是'GET'，常用的还有'POST'

3、dataType 设置返回的数据格式，常用的是'json'格式，也可以设置为'html'

4、data 设置发送给服务器的数据

5、success 设置请求成功后的回调函数

6、error 设置请求失败后的回调函数

7、async 设置是否异步，默认值是'true'，表示异步

$.ajax({
    url: 'js/user.json',
    type: 'GET',
    dataType: 'json',
    data:{'aa':1}
})
.done(function(data) {
    ......
})
.fail(function() {
    alert('服务器超时，请重试！');
});

二、$.get():

$.get() 方法使用GET请求从服务器加载数据;也是一种无刷新的请求数据的ajax方法。

参数：

url:访问的网址，需要遵循同源策略；
data:发送到服务器的数据。
function(data,status){}：请求成功运行的函数
dataType：请求响应的数据类型。

三、$.load():

四、$.post()：

五、getJSON()

六、getScript()

如何让一个cookie同时用于a.qq.com和b.qq.com？

不同域名是无法共享浏览器端本地信息，包括cookies，这即是跨域问题

Passport

有一个a.qq.com的图片发到百度贴吧上，会不会带上那个cookie？

ajax请求时是不会自动带上cookie的，要是想让他带上的话，必须设置withCredential为true

ajax会自动带上同源的cookie，不会带上不同源的cookie

# AJAX

# Ajax与cookie

# Ajax请求流程

# ajax/jsonp返回后台数据

# jsonp

# ajax的方法：

# 如何让一个cookie同时用于a.qq.com和b.qq.com？

# 有一个a.qq.com的图片发到百度贴吧上，会不会带上那个cookie？