btn.onclick = function(){
// 1. 实例化一个 XMLHttpRequest 对象
let http = new XMLHttpRequest();
// 2. 规划一个请求(三要素)
// 2.1 请求方式 GET || POST
// 2.2 请求地址
// 2.3 同步还是异步可选的参数，如果省略就是异步的请求
http.open("GET","http://10.35.170.103/data.php"); //带有一个请求参数的请求
http.open("GET",`http://10.35.170.103/data.php?age=${age.value}&sex=${sex.value}`); // 3. 真实的发送请求
http.send();
// 4. 接收来自服务器端的响应
http.onreadystatechange = function(){ //服务器端已将返回的内容交付给客户端手里了
if(http.readyState === 4){ console.log(http.responseText);
}}}
• 创建 XMLHttpRequest 对象
o 浏览器使用 XMLHttpRequest 对象与服务器进行交互，获取数据。一般现在流 行的浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
o 语法:
var xml=new XMLHttpRequest();
老版本的 IE 浏览器的创建方式为:var xml=new
ActiveXObject(“Microsoft.XMLHTTP”); var xml;
if (window.XMLHttpRequest) {
xml=new XMLHttpRequest();
}else{
xml=new ActiveXObject("Microsoft.XMLHTTP"); }
• 向服务器发送请求
24
o get 方式提交使用 XMLHttpRequest 对象的 open()方法向服务器发送请求 语法:
open(请求方式,请求地址(get 发送的数据拼接在 url 后面),true(异 步))
xml.open("get","index.json",true);
xmlH.send();// get 请求 send 保持为空
o post 方式提交 使用 XMLHttpRequest 对象的 open()与 send() 方法向服务器发 送请求
语法:
open(请求方式,请求地址,true(异步))
send()
xml.open("post","index.json",true); //如果想要使用 post 提交数据,必须添加此行 xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
通过 send 方法传递 //将数据 xhr.send('name=fox&age=18');
• onreadystatechange 事件
o o
o
当向服务器发送请求时 redyState 的值发生改变时触发 onreadystatechange
事件。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status 有两种数值，分别表示: 200: “OK” 404: 未找到页面 xml.onreadystatechange(function(){ if(xmlHttp.readyState==4&&xmlHttp.status==200){ console.log(xhr.responseText);
}}
