AJAX
-
介绍：
全称：Asynchronous JavaScript and XML 中文翻译：异步JavaScript和XML 用javascript异步形式去操作xml） Ajax唯 一能做的事：就是数据交互。 -
好处：
1、节省用户操作时间，提高用户体验，减少数据请求 2、传输获取数据 -
应用在何处
1、注册时手机号的验证（看这个号有没有注册过） 2、新闻定时刷新（不用手动刷新） -
同步与异步的区别
同步：一个执行完了，在执行下一个，需要排队。（false） 异步；同时进行，不需要排队 （true） 同步：同时一步一步进行，单线层形式，不执行完容易阻塞 异步：同时执行，类似于多线层形式，不会造成阻塞 status服务器状态码 http状态码分类‘
1.消息 后台已接收到数据
2.成功 得到响应请求成功
3.重定向 304缓存 也表示成功相当于把数据放到缓存里
4.请求错误 404客户端错误 地址错误
5.服务器错误
-
readystate ajax状态码
- 0 初始化
- 1 发送
- 2 接收
- 3 解析
- 4 完成
-
get与post区别
get：明文提交 安全性较低 不利于提交数据 传输的数据格式较小
post：隐式提交 安全性比较高适合提交数据，可以传入比较大的数据（提交限制2G大小）
-
get
1：需要编码 2：限制大小 3：明文提交 4：有缓存 5：中文需要使用encodeURI进行转义 6：地址放在？后面用&链接 -
post
1：不需要编码 2：不限制大小 3：密文提交 4：没有缓存 5：数据放到send中发送 6：声明请求头 请求头：xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
-
AJAX步骤
//第一步 创建Ajax对象 var str = new XMLHTTPRequest(); //第二步 打开方式 ser.open('get/post','地址',true); //第三步 发送 str.send(); //获取数据 ser.onreadystatechange = function (){//当ajax状态码发生改变时触发某个事件 if(str.readyState == 4){//完成后执行 if(str.status>=200&&str.status<300||str.status==304){//获取服务器状态码 document.write(str.responseText); }else{ console.log(str.status + '错误了ERR') } } } //str.responseText 是解析数据 //onchange：数据发生变化 失去焦点时触发 //oninput：input框发生变化时就触发，不需要失去焦点 -
get方式-Ajax封装
function ajax(method,url,data,success) { var xhr = null; try{ xhr = new XMLHttpRequest(); } catch(error){ xhr = new ActiveXObject('Microsoft.XMLHTTP');//兼容IE6； } if(method == 'get && data'){ url+='?' + data; } xhr.open(method,url,true); if(method == 'get'){ xhr.send(); } else{ xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); xhr.send(data); } xhr.onreadystatechange = function () { if(xhr.readyState == 4){ if(xhr.status == 200){ success && success(xhr.responseText) } else{ console.log(xhr.status) } } } } //调用+渲染到页面代码： <ul> <li> <a href=""></a> <span></span> </li> </ul> <script> function fn() { var ul = document.querySelector('ul') ajax('get', './php/getNews.php', '',function (data) { var a = JSON.parse(data); var html = ''; for (var i = 0; i < a.length; i++) { html += ` <ul> <li> <a href="">${a[i].title}</a> <span>${a[i].date}</span> </li> </ul>` } setInterval(fn,1000) ul.innerHTML = html; }) } fn(); setInterval(fn,1000) </script> function ajax(json){ let xhr = new XMLHttpRequest if(json.type == 'get'){ xhr.open('get',json.url+'?'+tostr(json.data),true) xhr.send() }else if(json.type=='post'){ xhr.open('post',json.url,true) xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded') xhr.send(tostr(json.data)) } xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status>=200&&xhr.status<300||xhr.status==304){ json.success(JSON.parse(xhr.responseText)) }else{ json.error(xhr.status) } } } function tostr(json){ let arr = [] for(let i in json){ arr.push(i+'='+json[i]) } let str = arr.join('&') return str } } -
兼容IE写法
try{ xhr = new XMLHttpRequest(); } catch(error){ xhr = new ActiveXObject('Microsoft.XMLHTTP');//兼容IE6； } var btn = document.querySelector('input'); btn.onclick = function () { var xhr = null; try{ xhr = new XMLHttpRequest(); } catch(error){ xhr = new ActiveXObject('Microsoft.XMLHTTP'); } xhr.open('get','./php/1.get.php?username=www&age=123',true); 用？链接 多个属性用&链接 xhr.send(); xhr.onreadystatechange = function () { if(xhr.readyState == 4){ if(xhr.status == 200){ console.log(xhr.responseText); } else{ console.log(xhr.status) } } } }
