14-javascript-ajax的学习-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_53841588/article/details/121002617

本文详细介绍了AJAX的核心概念、特点和使用方法，包括创建AJAX对象、设置请求参数和处理响应。同时，讨论了同源策略与跨域问题，提到了JSONP、反向代理和CORS作为常见的跨域解决方案。此外，还提及了异步编程中的Promise用于解决回调地狱。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AJAX的学习

1、背景

async 异步 ( async javascript and xml )
前后端交互的手段

2、ajax的特点

不需要任何其他东西就可以直接操作
纯面向对象的语法
JS内部给我们提供了一个内置构造函数我们可以直接使用
请求可以让页面无刷新更新数据
响应内容不会直接显示到页面

3、使用 AJAX

创建一个 ajax 对象

const xhr = new XMLHttpRequest()
const xhr - new ActiveXObject("Microsoft.XMLHTTP")   //IE9及以下

请求方式和请求地址

get  请求传参是拼接到地址后面  ?key=value&key=value

xhr.open("GET","/index.php?key=value&key=value)
//第三个参数：就是指定是否异步  默认值是  true

//POST请求需要有请求头
xhr.setRequestHeader("content-type","application/x-www-form-urlencode")
xhr.send("key=value&key=value")

发送请求

xhr.send()
setTimeout(()=>{
    console.log(xhr.readyState)
    ,2000)
xhr.onreadystatechange = function(){
    
}

注意：xhr 里面有两个东西状态码： status readyState

readyState === 0 请求建立了，创建了 ajax 对象以后
readyState === 1 请求准备完毕，知道了请求方式和请求地址 open() 以后
readyState === 2 接收服务端的响应
readyState === 3 开始解析数据了
readyState === 4 数据解析完成可以使用了

xhr 里面有两个方法 onreadystatechange onload

xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)){
        console.log(xhr.responseText)
    }
}
//新增的xhr方法
 //普通浏览器可用，老版浏览器别用  开发时也别用
xhr.onload = function(){
    console.log(xhr.responseText)
}