ajax的原理(java入门基础知识)
SEO运营哥
一、ajax是什么？
Ajax 全称：asynchronous javascript and XML（异步javascript 和XML）。异步：向服务器发送请求，在等待响应的过程中，浏览器可以做自己的事情，等到成功获取响应后，浏览器才开始处理响应的数据。XML：可扩展标记语言，前后端通信时，传输数据的一种格式。
Ajax是前后端通信时一种异步通信工具。常用在网站注册检索，搜索提示等，可以不重新加载整个页面，只对页面的某部分进行更新的情况。
二、ajax的基本用法
1、创建xhr实例对象。const xhr =new XMLHttpRequest（）。XMLHttpRequest，是一个构造函数，ajax实现浏览器与服务器之间异步通信的必要工具。
2、监听事件，处理响应。
xhr.onreadystatechange=()=>{
if (xhr.readyState!=4) return;
if((xhr.status>=200&&xhr.status<300)||xhr.status===304){
console.log(xhr.response)
}
}
Readystatechang：可以监听到readyState的状态变化，readyState的值：0-4。0:未初始化，尚未调用open（）。1:启动。已经调用open（），还未调用send（）。2:发送。已经调用send，还未收到响应。3:接收。已经收到部分响应。4:完成。已经收到全部响应，可以使用了。status：http状态码。
3。准备发送请求
xhr.open( “http方法”，“地址”，“true（是否异步）”)
4、发送请求
Xhr.send（数据）。携带的数据通过请求体发送，所以post方法可以发送数据，get请求不能发送数据。
三、json数据格式（Xhr.send（数据））
json：javascript object notation，前后端通信中的一种数据格式。json有三种形式，每一种形式都与js数据格式很像，，可以轻松的与js中的数据实现转换，通过json的转换，前后端通信时数据才能更好的识别。
Json储存在以.json为后缀的文件中。json的三种形式：1.简单值形式：数字，字符串，布尔值，null。2.对象形式：{ “name”:“张三”,”age”:18 }。3.数组形式：【1，“aaa”,null, true 】。注意：json中只要涉及到字符串都必须使用双引号，所有形式中，不包括undefined。
Json常用的方法
JSON.parse( )：将json格式的字符串解析成js中对应的值。
JSON.stringify( )：将js中的基本数据类型，对象，数组转化成json格式的字符串。
四、跨域请求（xhr.open( “http方法”，“地址”，“true（是否异步）”)）
什么是跨域？https：（协议）www.imooc.com( 域名 )：443（端口号）/course/list（路径）。协议，域名，端口号，任何一个不一样就是不同域。
使用JSONP实现跨域。原理：Script标签跨域不会被浏览器阻止，JSONP主要就是利用script标签，加载跨域文件。
具体过程：
1.服务器端准备好JSONP接口。如：
https://www.imooc.com/api/http/jsonp?callback=handleResponse
2.加载JSONP接口
<script src=“https://www.imooc.com/api/http/jsonp?callback=handleResponse”></script>
3、声明函数
Const handleResponse=data=>{
console.log( data)
}
五、XMLHttpRequest对象（创建xhr实例对象：const xhr =new XMLHttpRequest（））
1.XMLHttpRequest属性
⭐️responseText和response：响应的数据。
⭐️timeoout属性：设置请求的最长时间，单位是ms，毫秒。
2、XMLHttpRequest方法
Abort（）方法：终止当前请求，一般配合XMLHttpRequest.abort（）事件使用。
setRequestHeader( )方法：设置请求头信息。用法：xhr.setRequestHeader( 头部字段名称，头部字段的值 )。例：xhr.setRequestHeader（“Content-Type”,”application/json” ），xhr.send(JSON.stringify({ username:”Alex”,age:18}))。Content-Type:告诉服务器，浏览器发送的数据是什么格式的。
3、XMLHttpRequest事件
Load事件：响应数据可用时触发，可代替xhr.status==4
Error事件：请求发生错误时触发。
abort事件：调用abort（）方法时触发。
Timeout事件：请求超时时触发。
