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

我所知道的AJAX的更多相关文章

  1. 我所知道的MVVM框架(转 司徒大大 )

    RubyLouvre commented on 6 Sep 2014   avalon http://avalonjs.github.io/ (使用Object.defineProperties. V ...

  2. 《从零开始学Swift》学习笔记(Day5)——我所知道的标识符和关键字

    Swift 2.0学习笔记(Day5)——我所知道的标识符和关键字   原创文章,欢迎转载.转载请注明:关东升的博客 好多计算机语言都有标识符和关键字,一直没有好好的总结,就是这样的用着,现在小小的整 ...

  3. 《从零開始学Swift》学习笔记(Day5)——我所知道的标识符和keyword

     Swift 2.0学习笔记(Day5)--我所知道的标识符和keyword   原创文章,欢迎转载.转载请注明:关东升的博客 好多计算机语言都有标识符和keyword,一直没有好好的总结,就是这 ...

  4. 我所知道的Javascript

    javascript到了今天,已经不再是我10多年前所认识的小脚本了.最近我也开始用javascript编写复杂的应用,所以觉得有必要将自己的javascript知识梳理一下.同大家一起分享javas ...

  5. 我所知道的HttpContext.Current

    在MVC中,HttpContext.Current是比较常见的对象,可以用它来进行Session,Cache等的保存等.但是它并不是无处不在的,下面就慢慢来揭开它的面纱. 当我们向服务端发送请求的时候 ...

  6. 你所知道的Java单例模式并不是单例模式

    当我们搜索单例模式的时候,能看到很多例子,什么懒汉式.饿汉式,大概如下: public class Singleton { private static Singleton instance=null ...

  7. 我所知道的window.location

    多说无益 直接上干货 假如一个地址为  http://127.0.0.1:5000/index.html?id=4 window.location.href -- 完整路径 -- http://127 ...

  8. 网页基础:网页设计(我所知道的所有的html和css代码(含H5和CSS3)),如有错误请批评指正

    最基础的网页设计,就是给你一个图片你做成一个网页,当然,我的工作是C#,个人网页的功底不是很高首先先认识一下网页的一些相关知识: 一般的,现在一个html网页一般包含html文件,css文件,js文件 ...

  9. 我所知道的JavaScript中判断数据类型

    相信一提到怎么判断js的数据类型,大家都会想到的是typeof.instanceof,那么为什么有了typeof的存在还要有instanceof? typeof? 根据MDN:typeof操作符返回一 ...

随机推荐

  1. 解决mac os下mcss命令报错:env: node\r: No such file or directory

    标题无“转载”即原创文章,版权所有.转载请注明来源:http://besteam.im/blogs/article/31/. 我一直对字符界面有抵触感,即使会用vim,我的linux脚本(python ...

  2. ASP.NET Core:CMD命令行+记事本 创建Console程序和Web Application

    今天看了Scott关于ASP.NET Core的介绍视频,发现用命令行一步一步新建项目.添加Package.Restore.Build.Run 执行的实现方式,更让容易让我们了解.NET Core的运 ...

  3. try{} catch(…){} 讨论(转)

    以前都是用try{} catch(…){}来捕获C++中一些意想不到的异常, 今天看了Winhack的帖子才知道,这种方法在VC中其实是靠不住的.例如下面的代码: .try .{ .BYTE* pch ...

  4. NPOI扩展--判断指定单元格是否为合并单元格和输出该单元格的行列跨度(维度)

    因工作需要用到跨合并单元格获取数据,所以写了个NPOI扩展类. 主要方法如下: 1.判断指定行/列索引(单元格)是否为合并单元格. 2.获取指定列索引的实际含有数据的单元格. 3.返回指定行/列索引的 ...

  5. dede织梦数据表字段解释

    提示:常用字段,可以在dede后台->系统->SQL命令行工具,执行sql语句来批量修改 dede_addonarticle   附加文章表   aid  int(11)  文章编号    ...

  6. cassandra高级操作之分页的java实现(有项目具体需求)

    接着上篇博客,我们来谈谈java操作cassandra分页,需要注意的是这个分页与我们平时所做的页面分页是不同的,具体有啥不同,大家耐着性子往下看. 上篇博客讲到了cassandra的分页,相信大家会 ...

  7. linux监控流量脚本

    #!/bin/bashRx=`ifconfig eno16777736 | grep RX | grep packets | awk '{print $5}'`Tx=`ifconfig eno1677 ...

  8. Struts2的类型转换(下)

    Struts2提供的类型转换: Struts2提供的是一个名叫StrutsTypeConverter的抽象类,这个类实际上是DefaultTypeConverter的子类.当我们继承自该抽象类 时,要 ...

  9. 老李分享:android app自动化测试工具合集

    老李分享:android app自动化测试工具合集   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨 ...

  10. 3.XML的格式化显示

    使用CSS/XSLT格式化XML,可以使XML具有更加多彩的显示效果. 3.1 使用CSS格式化显示XML 使用CSS格式化XML只需要在XML中加上: <?xml-stylesheet typ ...