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
,决定权始终在对方手中