详解Ajax的使用

1.ajax翻译过来就是：异步javascript和XML，是一种异步动态局部刷新网页的技术，因为不使用AJAX的话更新内容是需要刷新整个网页的。ajax工作的原理就是：用户操作时，浏览器创建一个XMLHttpRequest对象，并且向服务器发送一个请求，服务器接受这个响应并且创建一个response发送数据返回给浏览器，浏览器用JS处理返回的数据并且渲染在页面。

2.AJAX请求：

创建XMLHttpRequest，这里对不同浏览器需要做个兼容处理；

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

向服务器发送请求（用创建的XMLHttpRequest对象调用open和send方法，get请求可以在url后传参）：

xmlhttp.open("GET","ajax_info.txt?fname=Henry&lname=Ford",true);
xmlhttp.send();

open方法按个参数：

第一个：method：请求的类型；GET 或 POST
第二个：url：文件在服务器上的位置
第三个：async：true（异步）或 false（同步），默认异步，若使用同步，浏览器会在请求数据这段时间处于假死状态，直到请求完成才会响应，影响用户体验

若用post方法，需要设置请求头，并且传入参数：

xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

其中setRequestHeader(header,value)，header：规定头的名称。value：规定头的值

响应：

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;//处理响应的数据在页面展示
    }
}

安全限制：

1.上面代码的URL使用的是相对路径。如果你把它改为'http://www.baidu.com.cn/'，再运行，肯定报错，这是因为浏览器的同源策略的限制，同源是指，域名，协议，端口相同，同源策略也是浏览器的一种安全机制，那我们请求外域的资源则必须涉及到跨域的问题了，大概有这么几种跨域的方法：

第一种：通过Flash插件发送HTTP请求，这种方式可以绕过浏览器的安全限制，但必须安装Flash，并且跟Flash交互。不过Flash用起来麻烦，而且现在用得也越来越少了。

第二种：通过在同源域名下架设一个代理服务器来转发，JavaScript负责把请求发送到代理服务器：

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

第三种：JSONP，但只能用GET请求，并且要求返回JavaScript。这种方式跨域原理是利用了浏览器允许跨域引用JavaScript资源

<html>
<head>
    <script src="http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice">
    </script>//这个标签相当于下面动态创建的，此处不需要写
    ...
</head>
<body>
<script>
  function refreshPrice(data) {
    var p = document.getElementById('test-jsonp');
    p.innerHTML = '当前价格：' +
        data['0000001'].name +': ' + 
        data['0000001'].price + '；' +
        data['1399001'].name + ': ' +
        data['1399001'].price;
}
</script>
</body>
</html>

动态创建script标签发起请求：

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);
}

若callback中包含的返回数据有：

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

在此，则完成了JSONP的跨域

第四种：CROS(跨域资源共享，是HTML5规范定义的如何跨域访问资源）

需要详细了解CROS可以传送到：https://yq.aliyun.com/articles/69313

假设本域是my.com，外域是sina.com，只要响应头Access-Control-Allow-Origin为http://my.com，或者是*，本次请求就可以成功。可见，跨域能否成功，取决于对方服务器是否愿意给你设置一个正确的Access-Control-Allow-Origin，决定权始终在对方手中

猜你喜欢