AJAX异步通讯

最新推荐文章于 2023-12-09 15:55:29 发布

敲代码好难

最新推荐文章于 2023-12-09 15:55:29 发布

阅读量335

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/weixin_43989621/article/details/119939405

版权

Ajax

一、ajax是什么？

Ajax：现在允许浏览器与服务器通讯而无需刷新当前页面的技术，是不需要刷新整个页面，只刷新局部页面的一种异步通讯技术

在这里插入图片描述

二、Ajax技术的核心：XMLHttpRequest对象

发送请求到服务器并获得返回结果

new Window.XMLHttpRequest()

在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求数据
在页面已加载后从服务器接收数据
在后台向服务器发送数据

三、常用方法

open(nethod,URL,async)
- 建立与服务器的链接
- method 参数指定请求的HTTP方法，如get或post
- URL 参数指定请求的地址
- async 参数指定是否使用异步请求，其值为true或false
send(content)
- 发送请求
- content 参数指定请求的参数
setRequestHeader(header,value)
- 设置请求的头信息，把首部设置为所提供的值，在设置首部之前，必须先调用open()
oneadystatechange(e)
- 指定回调函数

四、常用属性target

onreadystatechange：指定回调函数
readystate：XMLHttpRequest的状态信息
status：HTTP的状态码(200对应OK，404对应NotFount等)
statusText：HTTP状态码的相应文本(OK或者NotFount等)
responseText：获得响应的文本内容，表示一个字符串
responseXML：获得响应的XML文档对象，可以解析为DOM对象

五、就绪状态码readystate

0：XMLHttpRequest对象没有完成初始化

1：XMLHttpRequest对象开始发送请求

2：XMLHttpRequest对象的请求发送完成

3：XMLHttpRequest对象开始读取响应，还没有结束

4：XMLHttpRequest对象读取响应结束

六、状态码status

200：服务器响应正常

400：无法找到请求资源

403：没有访问权限

404：访问资源不存在

500：服务器内部错误

举个栗子🌰

//1.创建XMLHttprequest
const xhr = new XMLHttpRequest
//2.建立连接
xhr.open('get','http://192.168.0.101/music/data/music.json',true)
//3.发送请求
xhr.send()
//4.处理响应结果
xhr.onreadystatechange = function(e){
    let target = e.target
    if(target.readyState ==4){		//表示数据响应完成
        if(target.status ==200)	{	//状态码200：OK
            let content = target.responseText
            alert(content)
        }else{
            alert('请求出错'+target.status)
        }
    }
}