一、 创建ajax 并实例化核心对象 XMLHttpRequest
if(window.XMLHttpRequest){//大部分浏览器
ajax = new XMLHttpRequest();
}else{//IE6、IE5浏览器
ajax = new ActiveXObject("Micorsoft.XMLHttp");
}
二、与服务器建立连接
ajax.open("get","package.json",true);
//模板 ajax.open(type , url ,async);
/*
*type:标识请求类型(请求方式) get / post
*url:请求地址 json的地址
*async 标识 同步或异步 true(异步)/flase(同步) 这个参数可以省略 默认true;
* */
三、向服务器发送请求
ajax.send(null);
/*send方法 如果是get请求方式 则参数必须是null 不能省略*/
四、接受服务器的结果 监听事件:onreadystatechange事件
ajax.onreadystatechange=function () {
//readyState是监听客户端与服务器端的通信状态当值为4 时候表示响应完毕 status=200表示请求正确
if(ajax.status==200&&ajax.readyState==4){
var data = ajax.responseText;
console.log(data,typeof (data));
data = JSON.parse(data);
console.log(data,typeof (data));
data = JSON.stringify(data);
console.log(data,typeof (data));
}
}
/*
JSON.parse(data); //可以将json字符串转换成json对象
JSON.stringify(data); //可以将json对象转换成json字符串 */
ajax => A JS and XML
ajax => Asynchronous JavaScript and XML
/*-*-*-*-*-*-*-*-*-*-*-*->ajax的重点理论<-*-*-*-*-*-*-*-*-*/
/*XMLHttpRequest 对象提供了在网页加载后与服务器进行通信的方法。
什么是 XMLHttpRequest 对象?
XMLHttpRequest 对象是开发者的梦想,因为你能够:
在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求数据
在页面已加载后从服务器接收数据
在后台向服务器发送数据*/
// *****readyState
/*状态 名称 描述
0 Uninitialized 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
1 Open open() 方法已调用,但是 send() 方法未调用。请求还没有被发送。
2 Sent Send() 方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应。
3 Receiving(接受) 所有响应头部都已经接收到。响应体开始接收但未完成。
4 Loaded(加载完毕) HTTP 响应已经完全接收。*/
这是一个封装的ajax
function fun(){
var ajax=null;
if(window.XMLHttpRequest){
ajax=new XMLHttpRequest();
}else{
ajax=new ActiveXObject("Micorsoft.XMLHTTP");
}
ajax.open(type,url,async);
ajax.send(null);
ajax.onreadystatechange=function(){
if(ajax.readyState==4&&ajax.status==200){
var data=JSON.parse(ajax.responseText);
return data;
}
}
}