原生JS中ajax

一、 创建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; } } }