Ajax(Asynchronous JavaScript and XML):是指一种创建交互式的网页开发技术。
Ajax不是一种单一的技术，是多个技术的组合。它是把JavaScript、CSS、DOM和HTML结合起来的一种编程思路和方法的统称。Ajax技术颠覆了以往界面像服务端请求数据，需要重新刷新整个页面对这个数据做出展示的行为；只需要发出异步请求，等请求结果返回客户端后，在回调函数内对需要改变的部分界面进行数据绑定和显示，做到只需要刷新部分页面区域的功能而无需每次刷新整个页面，现在都是最常见的基本操作了。
Ajax的技术核心是XMLHttpRequest对象，而XMLHttpRequest说白了就是一个网络框架。Ajax的含义是使用JavaScript通过XMLHttpRequest对象进行与服务器的通信，返回xml,json,html或者其他任何一种文本格式的数据，然后对数据进行处理，异步显示界面等行为的一种编程操作。
1、网络请求
原生js处理ajax网络请求.png
jQuery处理ajax网络请求.png
//原生JavaScript ajax网络请求
var usernameStr = '超人来了';
var xhrSend = new XMLHttpRequest();
xhrSend.open('POST', 'http://localhost:8000/muxiInfo', true);
xhrSend.setRequestHeader('Content-Type', 'application/json');
xhrSend.send(JSON.stringify({ UserName: usernameStr }));
//----------同步写法---onload
xhrSend.onload = function () {
if (xhrSend.status == 200) {
console.log('--sendTest-接收：' + xhrSend.responseText);
var data = JSON.parse(xhrSend.responseText);
httpShow.innerHTML = data.message;
} else {
httpShow.innerHTML = '异常了呢';
}
};
//-----------异步写法----onreadystatechange
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
isSending = false;
if (xhr.status == 200) {
console.log('--sendTest-接收：' + xhrSend.responseText);
httpShow.innerHTML = xhr.response;
} else {
httpShow.innerHTML = '请求成功，但是返回异常了呢';
}
} else {
//其他状态，时刻监听
}
}
ajax1.png
//jQuery框架 ajax网络请求
$.ajax({
url: 'http://localhost:8000/muxiInfo',
//请求参数
data: { UserName: '李牛Ajax' },
//请求类型POST/GET，不区分大小写
type: 'POST',
//发送server的参数类型
contentType: 'application/json',
//期望server响应返回的结果类型
dataType: 'json',
//是否异步请求，默认true
async:true,
//超时时间
timeout: 2000,
//成功回调
success: function (data) {
console.log(data);
httpShow.innerHTML = data.message;
},
//失败回调
error: function (e) {
httpShow.innerHTML = e
}
})
2、跨域问题解决方案：
JSONP利用<script>标签、设置Cors请求头、jQuery通过外链 <script> 来实现、WebSocket通信
-
方案1：JSONP原生方法实现，利用<script>标签，使用程序员自己实现的巧妙方法“JSONP”跨域，
只能处理GET请求
script
script
image.png
- 方案2：使用jQuery请求实现
jQuery跨域的原理也是通过外链 <script> 来实现的，和JSONP同理，然后在通过回调函数加上回调函数的参数来实现真正的跨域，默认callback函数名，可自定义。
jQuery 在每次跨域发送请求时都会有callback这个参数，其实这个参数的值就是回调函数名称，所以，服务器端在发送json数据时，应该把这个参数放到前面并加上括号，这个参数的值往往是随机生成的，如：jQuery1294734708682，同时也可以通过 $.ajax 方法设置 jsonpcallback 方法的名称。明白了原理后，服务器端应该这样发送数据：
1. jsonp、jsonpcallback，jsonp跨域时可以自定义的两个参数
2. jsonp: 回掉函数名的参数名，默认callback，服务端通过它来获取到回掉函数名
3. jsonpCallback: 回掉函数名，默认jquery自动生成
//前端发送格式
如：http://xxx.html?jsonp=jsonpCallback&xxxx&xxx，默认：http://xxx.html?callback=jQuery13213_564964&xxxx&xxx
//服务端发送格式
string message = "jQuery13213_564964({\"userid\":0,\"username\":\"null\"})";//服务端返回到前端js引擎解析，调用jQuery13213_564964()函数
jq
jq
-
方案3：设置Cors请求头
Cors
Cors
-
方案4：使用WebSocket通信
image.png - 设置代理服务器：通过同一域名端口下设置代理服务器去请求目标服务器返回数据
