一.Ajax全称Asynchronous JavaScriptandXML异步JavaScript和XMLajax不是新的编程语言而是将现有的标准组合在一起使用的新方式。作用通过ajax可以在浏览器中向服务器发送异步请求最大优势不用刷新就可获取数据ajax缺点1.没有浏览历史不能回退2.存在跨域问题3.SEO(搜索引擎优化)不友好XMLXML是可扩展标记语言被设计用来传输和储存数据 //HTML呈现数据与HTML类似 但HTML是预定义标签而XML是自定义标签用来表示一些数据现在已经被JSON取代了代码//1.创建对象 const xhr new XMLHttpRequest() //2.创建对象 xhr.open(get,http://127.0.0.1:8000) //发送 xhr.send() //事件绑定 处理服务端返回的结果 xhr.onreadystatechange function(){ //readyState是xhr对象中的属性表示状态012344表示服务端全部返回 if(xhr.readyState 4){ if(xhr.status 200 xhr.status 300){ } } }二.IE缓存问题IE 浏览器在处理 Ajax 请求时会对请求的 URL 进行缓存。当多次使用相同的 URL 发起 Ajax 请求时IE 浏览器不会再次向服务器发送实际请求而是直接从本地缓存中读取之前的响应结果。这就导致即使服务器端的数据已经发生了变化客户端也无法获取到最新的数据依旧显示缓存中的旧数据解决方法加上时间戳例如http://127.0.0.1:8000/ie?tDate.now()加上时间戳就成了不同的请求不会走缓存重新向服务端发送请求三.请求超时和网络异常//超过2秒就取消请求 xhr.timeout 2000 //超时回调 xhr.ontiomeout function(){ alert(超时) } //网络异常回调 xhr.onerror function(){ alert(网络有问题) }四.手动取消请求let x nullbtn.onclick function(){x.abort()}五.ajax请求重复发送问题//标识变量let isSending false//是否正在发送Ajax请求//如果正在发送取消上一个相同请求创建一个新的请求。if(isSending) xhr.abort()六.JQuery发送Ajax请求1.get在BootCDN搜索JQuery 复制标签$(button).eq(0).click(function)(){$.get(http....,{a:100,B:200},function(){})}2.post3.通用型方法$.ajax({ url: 请求的 URL, type: 请求类型GET、POST 等, data: 要发送的数据, dataType: 预期的服务器响应数据类型, success: function(response) { // 请求成功时的回调函数 }, error: function(xhr, status, error) { // 请求失败时的回调函数 }, complete: function(xhr, status) { // 请求完成时的回调函数无论成功或失败都会执行 } });七.Axios发送AjaxBootCDN复制标签Axios 是一个基于 Promise 的 HTTP 客户端可用于浏览器和 Node.js 环境常被用来发送 Ajax 请求。axios.get(https:...,{ //url参数 params:{ id:100, vip:i } //请求头信息 headers:{ name:atguigu, age:20 } }) .then(value { console.log(value) }八.使用fetch函数发送Ajax请求fetch是现代浏览器提供的一个用于发起网络请求的原生 JavaScript API可用于替代传统的XMLHttpRequest来发送 Ajax 请求。fetch(https://jsonplaceholder.typicode.com/todos/1) .then(response { if (!response.ok) { throw new Error(HTTP error! status: ${response.status}); } return response.json(); }) .then(data { resultDiv.textContent JSON.stringify(data); }) .catch(error { resultDiv.textContent 请求出错${error.message}; });九.跨域问题跨域是指浏览器从一个域名的网页去请求另一个域名的资源时由于浏览器的同源策略会导致请求被限制。同源策略是浏览器的一种安全机制它要求浏览器在访问资源时协议、域名和端口号都必须相同否则就会被认为是跨域请求。解决方案1.JSONP(JSON with Padding)JSONP 是一种古老的跨域解决方案它利用了script标签的src属性不受同源策略限制的特点。服务器将返回的数据包装在一个回调函数中客户端通过动态创建script标签来请求这个带有回调函数的 URL当脚本加载完成后回调函数会被执行从而获取到服务器返回的数据。2.CORSCORS 是一种现代的跨域解决方案它是 W3C 标准允许浏览器和服务器之间进行跨域通信。服务器通过设置响应头来告诉浏览器哪些跨域请求是被允许的。当浏览器发起跨域请求时会先发送一个预检请求OPTIONS 请求询问服务器是否允许该请求服务器根据请求的信息返回相应的响应头如果允许则浏览器会继续发送实际请求3.代理服务器在同源的服务器上设置一个代理客户端将请求发送到同源的代理服务器代理服务器再将请求转发到目标服务器并将目标服务器的响应返回给客户端。由于客户端和代理服务器是同源的所以不会受到同源策略的限制。