Ajax

AJAX

阅读: 122318


AJAX不是JavaScript的科班,它仅是一个哥们“发明”的缩写:Asynchronous
JavaScript and XML,意思就是是因而JavaScript执行异步网络要。

假设条分缕析考察一个Form的交,你就是会晤发觉,一旦用户点击“Submit”按钮,表单先河交付,浏览器就是会刷新页面,然后以初页面里告知您操作是打响了如故退步了。如果不幸由于网络太慢或者另外原因,就谋面取得一个404页面。

即就是Web的运转规律:一蹩脚HTTP请求对应一个页面。

倘要于用户留于此时此刻页面被,同时有新的HTTP请求,就非得用JavaScript发送这多少个新请求,接收到数量后,再就此JavaScript更新页面,那样一来,用户就觉得温馨还停留在当前页面,可是多少却可持续地改进。

极端早大规模利用AJAX的就是Gmail,Gmail的页面在首不良加载后,剩下的具备数据都依靠让AJAX来更新。

之所以JavaScript写一个完完全全的AJAX代码并无复杂,可是急需小心:AJAX请求是异步执行之,也就是说,要通过回调函数获得响应。

当现世浏览器上写AJAX重要依靠XMLHttpRequest对象:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ajax</title>
</head>
<body>
<script>
'use strict';

function success(test){
  var textarea = document.getElementById('test-response-text');
  textarea.value = text;
}

function fail(code){
  var textarea = document.getElementById('test-response-text');
  textarea.value = 'Error code: ' + code;
}

var request = new XMLHttpRequest(); //新建XMLHttpRequest对象

request.onreadystatechange = function(){ //状态发生变化时,函数被回调
  if (request.readyState === 4) { //成功完成

    //判断响应结果:
    if (request.status === 200){
        //成功,通过responseText拿到响应的文本:
        return success(request.responseText);
      } else {
        //失败,根据响应码判断失败原因:
        return fail(request.status);
      }

    } else {
        // HTTP请求还在继续.......
    }
}

// 发送请求:
request.open('GET', '/api/categories');
request.send();

alert('请求已发送,请等待响应...');
</script>
</body>
</html>

 

对于没有版本的IE,需要更换一个ActiveXObject对象:

'use strict';
function success(text) {
    var textarea = document.getElementById('test-ie-response-text');
    textarea.value = text;
}

function fail(code) {
    var textarea = document.getElementById('test-ie-response-text');
    textarea.value = 'Error code: ' + code;
}

var request = new ActiveXObject('Microsoft.XMLHTTP'); // 新建Microsoft.XMLHTTP对象

request.onreadystatechange = function () { // 状态发生变化时,函数被回调
    if (request.readyState === 4) { // 成功完成
        // 判断响应结果:
        if (request.status === 200) {
            // 成功,通过responseText拿到响应的文本:
            return success(request.responseText);
        } else {
            // 失败,根据响应码判断失败原因:
            return fail(request.status);
        }
    } else {
        // HTTP请求还在继续...
    }
}

// 发送请求:
request.open('GET', '/api/categories');
request.send();

alert('请求已发送,请等待响应...');

 

倘您想拿正规化写法和IE写法混在共,可以这么形容:

var request;
if (window.XMLHttpRequest) {
    request = new XMLHttpRequest();
} else {
    request = new ActiveXObject('Microsoft.XMLHTTP');
}

 

就加一个论断即可。

 

透过检测window靶是否发XMLHttpRequest性能来规定浏览器是否帮助标准的XMLHttpRequest。注意,不要基于浏览器的navigator.userAgent来检测浏览器是否补助有JavaScript特性,一是因这个字符串本身可以充,二凡经IE版本判断JavaScript特性将非凡复杂。

当创立了XMLHttpRequest目的后,要先安装onreadystatechange的回调函数。在回调函数中,日常我们只有待经过readyState === 4判断请求是否成功,即使已经到位,再因status === 200看清是否是一个中标之响应。

XMLHttpRequest对象的open()术有3只参数,第一独参数指定是GET还是POST,第二单参数指定URL地址,第三单参数指定是否接纳异步,默认是true,所以不用写。

注意,千万不要把第三单参数指定为false,否则浏览器将告一段落响应,直到AJAX请求完成。假诺那些请耗时10秒,那么10秒内而会意识浏览器处于“假死”状态。

末段调用send()艺术才真的发送请求。GET要不欲参数,POST告需要拿body部分缘字符串或者FormData对象传上。

康宁限制

地点代码的URL使用的凡相对路径。尽管您将她改变呢'http://www.sina.com.cn/',再运行,肯定报错。在Chrome的决定台里,还足以看到错误新闻。

立马是盖浏览器的同源策略导致的。默认情况下,JavaScript在殡葬AJAX请求时,URL的域名必须同当下页面完全一致。

完全一致的意思是,域名要一如既往(www.example.comexample.com不等),协议而一律(httphttps今非昔比),端口号而平等(默认是:80端口,它和:8080尽管不同)。有的浏览器口子松一点,允许端口不同,大多数浏览器还会师严遵守那一个界定。

这就是说是无是为此JavaScript不能要外域(就是其他网站)的URL了邪?方法依旧有的,大概有诸如此类几栽:

  一是经过Flash插件发送HTTP请求,这种措施可以绕了浏览器的广安范围,但不可能不安装Flash,并且跟Flash交互。但是Flash用起累,而且现在因而得为越来越少了。

 

  二凡是由此当同源域名下架设一个代理服务器来转发,JavaScript负责管要发送至代理服务器:

  '/proxy?url=http://www.sina.com.cn'

    代理服务器再把结果再次回到,这样就是听从了浏览器的同源策略。这种办法麻烦的远在当为要服务器端额外进行开发。

 

  第三种办法叫JSONP,它爆发只限,只好用GET请求,并且要求再次回到JavaScript。这种艺术跨域实际上是行使了浏览器允许跨域引用JavaScript资源:

<html>
<head>
    <script src="http://example.com/abc.js"></script>
    ...
</head>
<body>
...
</body>
</html>

Ajax, 

 

 JSONP日常为函数调用的花样再次回到,例如,再次来到JavaScript内容如下:

foo('data');

这样一来,我们而当页面被优先准备好foo()函数,然后被页面动态加一个<script>节点,非凡给动态读取外域的JavaScript资源,最终就等正在接回调了。

因为163的股票查询URL为例,对于URL:http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice,你用得到如下重回:

refreshPrice({"0000001":{"code": "0000001", ... });

之所以我们得首先以页面被准备好回调函数:

function refreshPrice(data) {
    var p = document.getElementById('test-jsonp');
    p.innerHTML = '当前价格:' +
        data['0000001'].name +': ' + 
        data['0000001'].price + ';' +
        data['1399001'].name + ': ' +
        data['1399001'].price;
}

最后用getPrice()函数触发:

function getPrice() {
    var
        js = document.createElement('script'),
        head = document.getElementsByTagName('head')[0];
    js.src = 'http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice';
    head.appendChild(js);
}

 

 就到位了跨域加载数据。

CORS

设浏览器协理HTML5,那么就可以同劳永逸地行使新的跨域策略:CORS了。

CORS全称Cross-Origin Resource
Sharing,是HTML5标准定义之怎么跨域访问资源。

叩问CORS前,我们事先做精通概念:

Origin表示本域,也尽管是浏览器当前页面的所在。当JavaScript向外国(如sina.com)发起呼吁后,浏览器收到响应后,首先检查Access-Control-Allow-Origin是不是含有本域,假如是,则此次跨域请求成功,若是非是,则呼吁失败,JavaScript将无法获取到应的另数据。

之所以一个贪图来代表虽是:

 Ajax 1

比方本域是my.com,外域是sina.com,只要响应头Access-Control-Allow-Originhttp://my.com,或者是*,这一次请求虽得成功。

足见,跨域能否成,取决于对方服务器是否情愿给您设置一个不利的Access-Control-Allow-Origin,决定权始终在对方手中。

点这种跨域请求,称之为“简单请求”。简单请求包括GET、HEAD和POST(POST的Content-Type类型
仅限application/x-www-form-urlencodedmultipart/form-datatext/plain),并且不可能出现其余自自然义头(例如,X-Custom: 12345),平常可以满意90%的需要。

无你是不是要用JavaScript通过CORS跨域请求资源,你都使领悟CORS的规律。最新的浏览器周到援助HTML5。在援国外资源时,除了JavaScript和CSS外,都设验证CORS。例如,当您引用了某个第三着CDN上的书体文件时:

/* CSS */
@font-face {
  font-family: 'FontAwesome';
  src: url('http://cdn.com/fonts/fontawesome.ttf') format('truetype');
}

若该CDN服务商未正确安装Access-Control-Allow-Origin,那么浏览器不可能加载字体资源。

对PUT、DELETE以及此外品类如application/json的POST请求,在殡葬AJAX请求从前,浏览器会预首发送一个OPTIONS告(称为preflighted请求)到是URL上,询问对象服务器是否接受:

OPTIONS /path/to/resource HTTP/1.1
Host: bar.com
Origin: http://my.com
Access-Control-Request-Method: POST

服务器必须响应并明确提出允许的Method:

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://my.com
Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS
Access-Control-Max-Age: 86400

浏览器确认服务器响应的Access-Control-Allow-Methods头确实包含将要发送的AJAX请求的Method,才会持续发送AJAX,否则,抛来一个错误。

由于以POSTPUT艺术传递JSON格式的数目在REST中十分常见,所以要跨域正确处理POSTPUT恳请,服务器端必须对响应OPTIONS请求。

得深远摸底CORS的童鞋请走W3C文档

 

相关文章