---恢复内容开始---
1、jq中ajax封装
简单的$.ajax方法使用示例：请关注 传参类型及数据
Document 图书编码：
2、ajax API
$.ajax中也可以传错误的回调：
3、$.ajax自行封装
function ajax(obj) { //默认参数 var defaults = { type: 'get', data: {}, url: '#', dataType: 'text', async: true, success: function (data) { console.log(data) } }//处理形参，进行覆盖 for (let key in obj) { defaults[key] = obj[key] }//创建对象 var xhr = null//兼容处理 if (window.XMLHttpRequest) { xhr = new XMLHttpRequest() } else { xhr = new ActiveXObject('Microsoft.XMLHTTP') }//把对象形式对的参数转换为字符串形式的参数 var param = '' for (let attr in obj.data) { param += attr + '=' + obj.data[attr] + '&' } if (param) { param = param.substring(0, param.length - 1) }//处理get请求参数及中文乱码问题 if (defaults.type === 'get') { defaults.url += '?' + encodeURI(param) }//准备发送，设置发送的参数 xhr.open(defaults.type, defaults.url, defaults.async) //处理post请求并设置请求头 var data=null if(defaults.type==='post'){ data=param xhr.setRequestHeader("content-Type","application/x-www-form-urlencoded") } xhr.send(data)//处理同步情求，不执行回调函数 if(defaults.async){ return xhr.responseText//不用传回调函数 }//设置回调函数 xhr.onreadystatechange = () => { if (xhr.readyState === 4) { if (xhr.status === 200) { var data = xhr.responseText if(defaults.dataType=='json'){ data=JSON.parse(data) } obj.success(data) // console.log('ok') } } }}
4、ajax跨域
1)
跨域是非常常见的
2）一般解决方案:jsonp
开发接口简单，不存在兼容性问题
其他方案有：
3）跨域报错
拦截跨源请求：同源策略禁止读取位于 http://over.com/data.php 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）
Failed to load http://over.com/data.php: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
---恢复内容结束---
1、jq中ajax封装
简单的$.ajax方法使用示例：请关注 传参类型及数据
Document 图书编码：
2、ajax API
$.ajax中也可以传错误的回调：
3、$.ajax自行封装
function ajax(obj) { //默认参数 var defaults = { type: 'get', data: {}, url: '#', dataType: 'text', async: true, success: function (data) { console.log(data) } }//处理形参，进行覆盖 for (let key in obj) { defaults[key] = obj[key] }//创建对象 var xhr = null//兼容处理 if (window.XMLHttpRequest) { xhr = new XMLHttpRequest() } else { xhr = new ActiveXObject('Microsoft.XMLHTTP') }//把对象形式对的参数转换为字符串形式的参数 var param = '' for (let attr in obj.data) { param += attr + '=' + obj.data[attr] + '&' } if (param) { param = param.substring(0, param.length - 1) }//处理get请求参数及中文乱码问题 if (defaults.type === 'get') { defaults.url += '?' + encodeURI(param) }//准备发送，设置发送的参数 xhr.open(defaults.type, defaults.url, defaults.async) //处理post请求并设置请求头 var data=null if(defaults.type==='post'){ data=param xhr.setRequestHeader("content-Type","application/x-www-form-urlencoded") } xhr.send(data)//处理同步情求，不执行回调函数 if(defaults.async){ return xhr.responseText//不用传回调函数 }//设置回调函数 xhr.onreadystatechange = () => { if (xhr.readyState === 4) { if (xhr.status === 200) { var data = xhr.responseText if(defaults.dataType=='json'){ data=JSON.parse(data) } obj.success(data) // console.log('ok') } } }}
4、ajax跨域
1)
跨域是非常常见的
2）一般解决方案:jsonp
开发接口简单，不存在兼容性问题
其他方案有：
拦截跨源请求：同源策略禁止读取位于 http://over.com/data.php 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）
3）jsonp原理解析：
①静态script标签的 src属性进行跨域请求（不常用）
如果返回的是纯数据，无法通过js获取响应的数据（如 echo '123'）
可以请求js文件也可以请求php文件。不利于url传参，必须保证加载的顺序
标签内加asnyc属性后将无法获得响应数据,是异步加载。默认
情况下时同步加载
Document 你好
②动态创建script标签，通过标签的src属性发送请求
异步的
jsonp的本质：通过jsonp访问一个url地址，所返回的内容是一个函数调用，并且通过函数调用
传递一些参数
"cc","age"=>"14");echo 'foo('.json_encode($arr).')';?> Document 你好
上述代码中foo必须写死，不太灵活
下面改进：
Document 你好
4、jq解决跨域问题
$.ajax仍然支持跨域
经常会发生即使状态码是200也不能进入正确回调函数的情况
Document
5、兼容一般处理与跨域的自封装ajax方法
function ajax(obj) { // 默认参数 var defaults = { type: 'get', data: {}, url: '#', dataType: 'text', async: true, success: function (data) { console.log(data) } } // 处理形参，传递参数的时候就覆盖默认参数，不传递就使用默认参数 for (var key in obj) { defaults[key] = obj[key]; } if (defaults.dataType == 'jsonp') { ajax4jsonp(defaults) } else { ajax4json(defaults) } function ajax4json(defaults) { // 1、创建XMLHttpRequest对象 var xhr = null; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } // 把对象形式的参数转化为字符串形式的参数 /* {username:'zhangsan','password':123} 转换为 username=zhangsan&password=123 */ var param = ''; for (var attr in obj.data) { param += attr + '=' + obj.data[attr] + '&'; } if (param) { param = param.substring(0, param.length - 1); } // 处理get请求参数并且处理中文乱码问题 if (defaults.type == 'get') { defaults.url += '?' + encodeURI(param); } // 2、准备发送（设置发送的参数） xhr.open(defaults.type, defaults.url, defaults.async); // 处理post请求参数并且设置请求头信息（必须设置） var data = null; if (defaults.type == 'post') { data = param; xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); } // 3、执行发送动作 xhr.send(data); // 处理同步请求，不会调用回调函数 if (!defaults.async) { if (defaults.dataType == 'json') { return JSON.parse(xhr.responseText); } else { return xhr.responseText; } } // 4、指定回调函数（处理服务器响应数据） xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if (xhr.status == 200) { var data = xhr.responseText; if (defaults.dataType == 'json') { // data = eval("("+ data +")"); data = JSON.parse(data); } defaults.success(data); } } }} } function ajax4jsonp(defaults) { var param = '' for (var attr in defaults.data) { param += attr + "=" + defaults.data[attr] + '&' } if (param) { param = param.substring(0, param.length - 1) param = '&' + param } var cbName = "jQuery" + ("3.3.1" + Math.random()).replace(/\D/g, "") + '_' + (new Date().getTime()) if (defaults.jsonpCallback) { console.log('ok') cbName = defaults.jsonpCallback } //回调函数 window[cbName] = function (data) { defaults.success(data) } var script = doc.createElement('script') script.src = defaults.url + '?' + defaults.jsonp + '=' + cbName + param var head=document.getElementsByTagName('head')[0] head.appendChild(script) }
8、搜索联想案例：
Document
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.
readyState
0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法，正在发送请求2 - (载入完成)send()方法执行完成，3 - (交互)正在解析响应内容4 - (完成)响应内容解析完成，可以在客户端调用了