原生JS中的Ajax

原生JS中的Ajax发送数据的步骤

第一步：创建异步对象

//XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

var xmlhttp = new XMLHttpRequest();

第二步：设置 请求行 open(请求方式，请求url)

open(method,url,async)

method：请求的类型；GET 或 POST

· 以下情况中，请使用 POST 请求
· 无法使用缓存文件（更新服务器上的文件或数据库）
· 向服务器发送大量数据（POST 没有数据量限制）
· 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

url：文件在服务器上的位置

async：true（默认异步）或 false（同步）

async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数
async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可

比如：

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);//添加一个唯一的 ID，防止得到的是缓存的结果

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);//通过 GET 方法发送信息

xmlhttp.open("POST","demo_post.asp",true);

第三步：设置请求头:

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头，然后在 send() 方法中规定您希望发送的数据：

1.get不需要设置

2.post需要设置请求头：Content-Type:application/x-www-form-urlencoded

xmlhttp.open("POST","ajax_test.asp",true);  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");  xmlhttp.send("fname=Bill&lname=Gates");

第四步：设置请求体 send()

1.get的参数在url拼接了，所以不需要在这个函数中设置 xhr.send(null)

2.post的参数在这个函数中设置(如果有参数) xhr.send(“username=”+name);

第五步：让异步对象接收服务器的响应数据

一个成功的响应有两个条件：
1.服务器成功响应了
2.异步对象的响应状态为4(数据解析完毕)

xmlhttp.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4){
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
console.log(xhr.responseText);
}

ajax-get方式请求案例：

var xhr = new XMLHttpRequest();
xhr.open("get","validate.php?username="+name);
xhr.send(null);
xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4){ console.log(xhr.responseText); document.querySelector(".showmsg").innerHTML = xhr.responseText;;
}
}

ajax-post方式请求案例：

var xhr = new XMLHttpRequest();
xhr.open("post","validate.php");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("username="+name);
xhr.onreadystatechange = function(){
// 判断服务器是否响应，判断异步对象的响应状态
if(xhr.status == 200 && xhr.readyState == 4){
document.querySelector(".showmsg").innerHTML = xhr.responseText;
}
}

实例：https://www.w3school.com.cn/tiy/t.asp?f=ajax_httpsuggest