12ajax-CSDN博客

本文链接：https://blog.csdn.net/m0_56087583/article/details/121265618

Ajax是一种无刷新页面的异步数据提交技术，通过XMLHttpRequest对象实现。创建对象后，调用open()方法指定请求类型、URL和异步模式，setRequestHeader()设置请求头，send()发送数据。当onreadystatechange事件触发，根据readyState和status判断请求状态，获取并处理响应结果。例如，登录场景中，通过响应文本内容判断登录是否成功。

摘要由CSDN通过智能技术生成

这### 1.什么是ajax?

全程为:“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML）

作用:无刷新状态提交页面,实现异步提交

Ajax其实质是利用浏览器提供的一个特殊的对象（XMLHttpRequest)异步地向服务器发送请求

2.创建XMLHttpRequest对象

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

● 所有现代浏览器都内建了 XMLHttpRequest 对象

var HttpObj = new XMLHttpRequest()

 //open(method,URL,async)
HttpObj.open("post","login",true);
//setRequestHeader(header,value)
HttpObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
//send(content)
HttpObj.send("name="+name+"&password="+password)

open(method,URL,async)

建立与服务器的连接;

method参数指定请求的HTTP方法,典型的是GET和POST

URL是参数指定请求的地址

async是是否使用异步请求.其值为true或者false

send(content)

发送请求

content参数指定请求传递的参数

setRequestHeader(header,value)

设置请求头信心

3.XMLHttpRequest对象的常用属性

onreadystatechange

事件,指定回调函数

readyState:XMLHttpRequest的状态信息

0:还没有完成初始化

1:开始发送请求

2:请求发送完成

3:开始读取响应还没有结束

4:读取响应结束

 HttpObj.onreadystatechange = function (){
                //当对象就绪状态为4,http响应状态吗为200时获取响应内容
                if (HttpObj.readyState==4&&HttpObj.status==200){
                    if (HttpObj.responseText==0){
                        alert("登陆成功")
                        location.replace("index.html")
                    }else if (HttpObj.responseText==1){
                        alert("账号或密码错误")
                    }else{
                        alert("服务器忙,请稍后")
                    }
                }

status

HTTP的状态码

200:服务器响应正常

400:无法找到请求资源

403:没有访问权限

404:访问的资源不存在

500:服务器内部错误

responseText:获得响应的文本内容

if (HttpObj.responseText==0){
             alert("登陆成功")
             location.replace("index.html")
}else if (HttpObj.responseText==1){
             alert("账号或密码错误")
}else{
             alert("服务器忙,请稍后")
}