我所知道的AJAX_随笔

我所知道的AJAX

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

}

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/586746.html

我所知道的AJAX

发表评论

评论列表（0条）