Ajax相关学习_ajax error xhr-优快云博客

本文链接：https://blog.youkuaiyun.com/k_5412528/article/details/145534269

一.Ajax

Asynchronous JavaScript and XML（异步JavaScript和XML）

通过ajax可以在浏览器中向服务器发送异步请求

最大优势：不用刷新就可获取数据

ajax不是新的编程语言，而是将现有的标准组合在一起使用的新方式

XML可扩展标记语言，被设计用来传输和储存数据 //HTML呈现数据

与HTML类似但HTML是预定义标签，而XML是自定义标签，用来表示一些数据

现在已经被JSON取代了

ajax缺点

1.没有浏览历史，不能回退

2.存在跨域问题

3.SEO(搜索引擎优化)不友好

代码

//1.创建对象
const xhr = new XMLHttpRequest()
//2.创建对象
xhr.open('get','http://127.0.0.1:8000')
//发送
xhr.send()
//事件绑定 处理服务端返回的结果
xhr.onreadystatechange = function(){
    //readyState是xhr对象中的属性，表示状态0，1，2，3，4，4表示服务端全部返回
    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?t='+Date.now()'

加上时间戳，就成了不同的请求，不会走缓存，重新向服务端发送请求

三.请求超时和网络异常

//超过2秒就取消请求
  xhr.timeout = 2000
 //超时回调
  xhr.ontiomeout = function(){
     alert('超时')
   }
//网络异常回调
  xhr.onerror = function(){
   alert('网络有问题')
  }

四.手动取消请求

let x = null

btn.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.post

3.通用型方法

$.ajax({
    url: '请求的 URL',
    type: '请求类型（GET、POST 等）',
    data: '要发送的数据',
    dataType: '预期的服务器响应数据类型',
    success: function(response) {
        // 请求成功时的回调函数
    },
    error: function(xhr, status, error) {
        // 请求失败时的回调函数
    },
    complete: function(xhr, status) {
        // 请求完成时的回调函数，无论成功或失败都会执行
    }
});

七.Axios发送Ajax

BootCDN复制标签

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.CORS

CORS 是一种现代的跨域解决方案，它是 W3C 标准，允许浏览器和服务器之间进行跨域通信。服务器通过设置响应头来告诉浏览器哪些跨域请求是被允许的。当浏览器发起跨域请求时，会先发送一个预检请求（OPTIONS 请求），询问服务器是否允许该请求，服务器根据请求的信息返回相应的响应头，如果允许则浏览器会继续发送实际请求