AJAX为“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术），是一种广泛应用在浏览器的网页开发技术。
Ajax是多项技术的综合应用。
创建对象的方式不同：
var xmlHttp=window.XMLHttpRequst ? new XMLHttpRequest : new ActiveXObject('Microsof.XMLHTTP');//兼容不同浏览器
我们定义的函数一般会被执行3次，状态码依次返回2,3,4,
xmlHttp.readyState：
0：表示未初始化，还没有调用send()方法
1：表示载入，已调用send()方法，正在发送请求
2：载入完成，send()方法执行完成，已经接受全部响应内容
3：交互，正在解析响应内容
4：完成，响应内容解析完成，可以在客户端调用了
跨域的必要条件：
1、协议（http、https）、 2、域名（https://www.baidu.com）域名就是baidu、 3、端口（80、8080、8081） （以上有任何一个不同都视作跨域）解决方案：
A、jsonp（利用动态创建script标签来实现的）
B、document.domain（将不同的两个页面的域名修改一样）
C、window.name（两个页面的window.name是相同的，在同一浏览器下）
D、HTML5的 postMessage
function onload(){
var iframe=document.getElementById('iframe');
var win=iframe.contentWindow; //回去window对象
win.postMessage("哈哈，我实现跨域了","*");
// postMessage 第一个参数为发送的消息，只能是字符串，第二个参数为限定接受消息的那个window对象所在的域，如不想限定域，可以使用通配符 * 。
}
AJAX请求步骤：
1、创建异步对象。
2、建立链接 {
A，请求方式（get/post），
B、请求地址、
C、是否异步 {
true：表示建立异步链接，
false：表示等待服务器的响应。
} } 3、指定数据返回时回调函数（onreadystatechage ） 4、发送请求（send） 实例：
var xmlHttp=window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xmlHttp.open('GET','data/jsonData.json',true);
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4 && xmlHttp.status==200){
var jsonData=xmlHttp.responseText;//得到服务器响应的数据
jsonData=JSON.parse(jsonData);//把json字符串转化为json对象 或者使用 jsonData=eval('('+jsonData+')');
//处理数据
}
}
xmlHttp.send(null);
Jquery的Ajax实现：
$.ajax({
type:'POST',
url:'http://apis.juhe.cn/cook/query',
dataType:'jsonp',
data:{
'key': 'dedaec74f84b89cae6463725b1161756',
'menu': '青椒炒肉',
'rn': '10',
'pn': '3'
},
success:function (data) {
console.log(data);
},
error:function () {
}
});
AJAX跨域之JSONP实现方式：
<head>PHP页面实现关键代码：
<meta charset="UTF-8">
<title>Promise</title>
<script type="text/javascript">
function jsonpCallback(result) {
console.log(result);
}
</script>
</head>
$(function(){
var JSONP=document.createElement("script");
JSONP.type="text/javascript";
JSONP.src="http://ceshi.cc/ceshi.php?callback=jsonpCallback";
JSONP.charset="utf-8";
document.getElementsByTagName("head")[0].appendChild(JSONP);
});
<?php
header("content-type:application/json");
if ($_GET['callback']) {
print $_GET['callback']."(";
}
print json_encode($content);
if ($_GET['callback']) {
print ")";
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）