一、AJAX
1）定义：浏览器异步的技术，通过JS异步向服务器发送请求并获取到响应数据。
2）特点：浏览器异步访问，可以做到局部刷新，提升用户体验。典型应用场景：局部刷新、搜索建议、前后端分离。
二、异步对象XMLHttpRequest
1）XHR定义：XHR是Ajax的核心对象，叫做异步对象，代替浏览器向服务器发送异步请求并获取响应。
2）使用流程（了解）
1. 创建异步对象
2. 创建请求
3. 发送请求
4. 接收响应
var xhr = XMLHttpRequest();
xhr.open("请求方法", "请求URL地址");
xhr.send("请求体数据,GET请求填写NULL");
xhr.responseText
原生JavaScript示例：
<html>
<div>也许时间是一种解药,也是我现在正服下的毒药!</div>
<script>
var xhr = new XMLHttpRequest();
xhr.open("get", "http://8000/a/b/c/?user=liying");
xhr.send(null);
xhr.onreadystatechange = function(){ <!--监听事件状态 -->
if(xhr.readyState==4){ <!--4，表示响应已全部接收 -->
console.log(xhr.responseText) <!--获取响应数据 -->
}
}
</script>
<script>
var xhr = new XMLHttpRequest();
xhr.open("post", "http://8000/a/b/c/");
xhr.send("username=liying&password=12345");
</script>
</html>
三、跨域
1）什么是跨域：非同源的网页相互发送请求的过程，叫做跨域。
2）浏览器同源策略
* 同源定义：`相同协议、相同域名、相同端口`
* 同源策略：`在HTTP中，必须为同源地址才可以相互发送请求，非同源地址的请求会被浏览器拒绝（浏览器控制台出现：同源策略禁止读取位于......，则一定是跨域的问题）。`
四、JQuery对Ajax支持
1）发送GET和POST请求：`$.get() $.post()`
* $.get(url, data, callback, type)
* $.post(url, data, callback, type)
url: 请求路由，字符串
data：传递给服务端的参数，可以是字符串"name=sf.zh&age=18"，也可以是js对象{name:"sf.zh",age:18}
callback：响应成功后的回调函数ex: function(data){console.log(data) }
type:响应回来的数据的格式，取值如下:
1.html : 响应回来的文本是html文本
2.text : 响应回来的文本是text文本
3.script : 响应回来的文本是js执行脚本
4.json : 响应回来的文本是json格式的文本
* 示例
<script>
$("#btn1").on("click", function(){
$.get(
"http://127.0.0.1:8000/server/",
{"username":"liying"},
function(resp){
console.log(resp)
}
)
})
</script>
2）发送所有的请求：$.ajax()
$.ajax({
url: 请求路由，字符串
type: 请求方法,
data: {} 传递给服务器的参数，可以是字符串，也可以是js对象
dataType：字符串，响应回来的数据格式
success: function(resp){} 响应成功后的回调函数,
error: function(xhr){} 响应失败后的回调函数,
beforeSend: 发送ajax异步请求之前执行的操作,比如发送之前可以设置请求头,如果return False，则终止请求。
})
* 示例
<script>
$("#btn").on("click", function(){
$.ajax({
type: "POST",
url: "http://127.0.0.1:8000/v1/translate",
data: {"word": $("#word").val()},
success: function(resp){
$("#result").html(resp)
}
})
})
</script>
