Ajax一遍不忘

1、介绍

1. Ajax是异步的JavaScript和XML
2. 不是编程语言，而是一种新方法
3. 需要在允许JavaScript的浏览器使用
4. 不用在加载整个页面的情况下，和服务器交换数据并更新部分网页
5. XML是Ajax的一种实现方式

2、创建XMLHttpRequest对象

1. XMLHTTP Request是Ajax的基础
2. 所有浏览器都支持XMLHttpRequest
3. XMLHttpRequest用于在后台与服务端交换数据
4. 所有浏览器都内建XMLHttpRequest对象

3、向服务端发送请求

1. 要使用XMLHttpRequest对象的open()和send()方法
2. XMLHttpRequest方法

方法	描述
open(url,method,async)	url:地址；method：请求方法；async：是否异步
setRequestHeader(header,value)	header：规定头的名称；value：规定头的值
send(string)	string：仅用于post请求

4、服务器响应

1. 获取来自服务器的响应通过使用XMLHttpRequest对象的responseText和responseXML属性

5、onreadystatechange事件

XMLHttpRequest有三个重要的属性

1. onreadystatechange:每当readystate改变时，都会触发该事件
2. readystate：存有XMLHttpRequest的状态信息（0：请求初始化；1：服务器建立链接；2：请求已接受；3：请求处理中；4：请求完成，响应就绪
3. status：200：🆗；404：未找到页面

6、优缺点

优点：

1. 可以在不刷新网页的情况下，进行进行服务端数据请求
2. 通过用户事件处理，来刷新部分网页

缺点

1. 有跨域问题
2. 不支持seo
3. 没有浏览历史

7、基本Ajax操作

 // 创建XMLHttpRequest对象
    const xhr=new XMLHttpRequest()
    // 初始化请求方法和url
    xhr.open('GET','url')
    // 发送请求
    xhr.send()
    // 事件绑定，处理Ajax响应
    xhr.onreadystatechange=function(){
      if(xhr.readyState===4&&xhr.status===200){
        // 处理响应体
      }
    }

get请求设置参数
在open方法中的URL中设置参数
post请求设置参数
在send方法中设置请求体参数

xhr.send('a=100&b=100')

设置请求头

xhr.setRequestHeader('Content-type':'form')

8、请求超时和网络异常

// 设置网络超时
xhr.timeout=2000
//网络超时回调
xhr.ontimeout=function(){
alert('请求超时’）
}
//网络异常
xhr.onerror=function(){
}

9、取消请求

通过使用abort方法，取消网络请求

xhr.abort()

10、重复请求问题

可以通过添加标识变量来解决重复请求的问题

11、jquery中发送Ajax请求

$.ajax({
	//url
	url:'http://127.0.0.1/',
	//参数
	data：{a:100}
	//请求类型
	type:'GET'，
	//成功的回调
	success:function(data){},
	timeout:1000,
	error:function(){},
	//请求头
	headers:{}
})

12、axios发送Ajax请求

axios的返回是通过then进行处理，不是事件回调

axios.get(url,{
	//请求参数
	params:{
		id:100
	}
	//请求头信息
	headers:{
		name:'aguigu'
	}
}).then(value=>{
	console.log(value)
})

方法二

//设置基地址
axios.defaults.baseURL='http://127.0.0.1'
axios({
	url:'',
	methods:'',
	//url参数
	params:'',
	//请求头参数
	headers:'',
	//请求体参数
	data:'',
})

13、使用fetch发送Ajax

fetch(url,{
	//请求方法
	methods:'',
	//请求头
	headers:'',
	//请求体
	body:''
}).then(response=>{
	return response.text()
}).then(response=>{
	console.log(response)
})

跨域问题

同源：相同的域名、端口之间发送请求，
jsonp解决跨域问题:

1. 一个非官方解决跨域问题的方法，只支持get请求
2. 通过script标签来解决跨域问题，发送请求

cors解决跨域问题
工作方式：通过设置响应头来告诉浏览器，该请求允许跨域，支持get、post请求

response.setHeader("Access-Control-Allow-Origin":"*")