当前位置：首页 > news >正文

我所知道的AJAX

news 来源：原创 2024/5/4 18:12:47

AJAX为“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术），是一种广泛应用在浏览器的网页开发技术。Ajax是多项技术的综合应用。

1、不同浏览器下ajax实现上的差异？

创建对象的方式不同：
var xmlHttp=window.XMLHttpRequst ? new XMLHttpRequest : new ActiveXObject('Microsof.XMLHTTP');//兼容不同浏览器

2、一次ajax请求过程中有哪几种状态值,不同状态值之间含义是什么？

我们定义的函数一般会被执行3次，状态码依次返回2,3,4,
xmlHttp.readyState：
0：表示未初始化，还没有调用send()方法
1：表示载入，已调用send()方法，正在发送请求
2：载入完成，send()方法执行完成，已经接受全部响应内容
3：交互，正在解析响应内容
4：完成，响应内容解析完成，可以在客户端调用了

3、ajax在跨域的情况下会出现什么状况，以及解决方案？

跨域的必要条件：

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>
    <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页面实现关键代码：

<?php
header("content-type:application/json");
if ($_GET['callback']) {
    print $_GET['callback']."(";
}
print json_encode($content);
if ($_GET['callback']) {
    print ")";
}