前端随心记---------Ajax原理及实现跨域方法
Ajax原理：
Ajax的原理简单来说就是通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用JavaScript来操作dom从而更新页面。这其中最关键的一步就是从服务器获得请求数据。
XmlHttpRequest是Ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是JavaScript可以 及时向服务器提出请求和处理响应，而不阻塞用户，达到无刷新的效果。
ajax实际上是异步的javascript和xml。
原生js实现ajax请求：
//创建 XMLHttpRequest 对象 var ajax = new XMLHttpRequest(); //规定请求的类型、URL 以及是否异步处理请求。 ajax.open(\'GET\',url,true); //发送信息至服务器时内容编码类型 ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //发送请求 ajax.send(null); //接受服务器响应数据 ajax.onreadystatechange = function () { if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) { } };
ajax请求方式get和post的区别
代码上：
get通过url传递参数。
post通过设置请求头，规定请求数据类型。
使用上：
post比get安全。
get传递速度比post快 根据传参决定。
get获取数据 post上传数据。
post传输文件大理论上没有限制， get传输文件小。
造成跨域的原因：
浏览器的同源策略。
事实上，当我们在跨域请求服务器时，服务器收到请求并响应了数据给浏览器，但是由于浏览器的同源策略，对响应数据进行校对时，发现返回数据的域名和当前发送数据域名并不是同域，因此根据浏览器的机制进行丢弃。
实现跨域的解决方案：
1.jsonp 只能解决get跨域
原理：动态创建一个script标签。利用script标签的src属性不受同源策略限制，因为所有的src属性和herf属性都不受同源策略限制，可以请求第三方服务器数据内容。
步骤：
1.去创建一个script标签 2.script的src属性设置接口地址 3.接口参数,必须要带一个自定义函数名 要不然后台无法返回数据。 4.通过定义函数名去接收后台返回数据 //去创建一个script标签 var script = document.createElement("script"); //script的src属性设置接口地址 并带一个callback回调函数名称 script.src = "http://127.0.0.1:8888/index.php?callback=jsonpCallback"; //插入到页面 document.head.appendChild(script); //通过定义函数名去接收后台返回数据 function jsonpCallback(data){ //注意 jsonp返回的数据是json对象可以直接使用 //ajax 取得数据是json字符串需要转换成json对象才可以使用。 }
2.同域代理。
3.domain.xml服务器配置文件。
4.cors 跨域资源共享。
$. axios
利用jQquery实现ajax。
<script> $.ajax({ "url":"userServlet", //要提交的URL路径 "type":"GET", //发送请求的方式 "data":"name="+name, //要发送到服务器的数据 "dataType":"text", //指定返回的数据格式 "success":"callback", //响应成功后要执行的代码 "error":function(){ //请求失败后要执行的代码 alert("用户名验证时出现错误，请稍后再试"); } }); //响应成功的回调函数 function callback(data){ if(data=="true"){ $("#nameDIV").html("用户名已被使用"); }else{ $("#nameDIV").html("用户名可以使用"); } }
axios实现ajax。基于peomise
ajax({ type: \'post\', url: baseURL + \'url\', data: { method: \'method\', accessToken: options.accessToken, product_id: options.id, product_code: options.code, price: options.price } }).then(function (res) { console.log(res); }, function (err) { console.log(err); });
ajax的优点：
1.实现页面的无刷新。
2.按需请求数据。
ajax的缺点：
对浏览器后退机制的破坏
Http常见的状态码：
一：2开头状态码
2xx (成功)表示成功处理了请求的状态代码
二：3开头状态码
3xx (重定向) 表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。
304 (未修改) 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。
三：4开头状态码
4xx(请求错误) 这些状态代码表示请求可能出错，妨碍了服务器的处理。
1:400 (错误请求) 服务器不理解请求的语法。
2:403 (禁止) 服务器拒绝请求。
3:404 (未找到) 服务器找不到请求的网页。
四：5开头状态码
5xx(服务器错误)这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。
500 (服务器内部错误) 服务器遇到错误，无法完成请求。
501 (尚未实施) 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。
502 (错误网关) 服务器作为网关或代理，从上游服务器收到无效响应。
503 (服务不可用) 服务器目前无法使用(由于超载或停机维护)。 通常，这只是暂时状态。
504 (网关超时) 服务器作为网关或代理，但是没有及时从上游服务器收到请求。
505 (HTTP 版本不受支持) 服务器不支持请求中所用的 HTTP 协议版本。