ajax知识点

最新推荐文章于 2022-05-04 16:06:02 发布

我爱丁丁猫

最新推荐文章于 2022-05-04 16:06:02 发布

阅读量414

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog.php?id=h1acij1kjbkj&title=ajax%E7%9F%A5%E8%AF%86%E7%82%B9

版权

前端专栏收录该内容

1898 篇文章 4 订阅

订阅专栏

1、Ajax包含下列技术：http://blog.csdn.net/lxcao/article/details/52745743
基于web标准（standards-basedpresentation）XHTML CSS的表示；
使用 DOM（Document ObjectModel）进行动态显示及交互；
使用 XML 和 XSLT 进行数据交换及相关操作；
使用 XMLHttpRequest 进行异步数据查询、检索；
使用 JavaScript 将所有的东西绑定在一起。

2、Ajax应用程序的优势在于：
1. 通过异步模式，提升了用户体验
2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
3. Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。
AJAX最大的特点是什么？Ajax可以实现动态不刷新（局部刷新）
就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。

3、请介绍一下XMLhttprequest对象。
Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。通过XMLHttpRequest对象，Web开发人员可以在页面加载以后进行页面的局部更新。

4、AJAX技术体系的组成部分有哪些。
HTML，css，dom，xml，xmlHttpRequest，javascript

5、AJAX请求总共有多少种CALLBACK。
Ajax请求总共有八种Callback
onSuccess
onFailure
onUninitialized
onLoading
onLoaded
onInteractive
onComplete
onException

6、在 Ajax应用中信息是如何在浏览器和服务器之间传递的
通过XML数据或者字符串

7、在浏览器端如何得到服务器端响应的XML数据。

XMLHttpRequest对象的responseXML属性。得到字符串是通过responseText属性。

8、 XMLHttpRequest对象在IE和Firefox中创建方式有没有不同。

9、json 和 string互换。http://blog.csdn.net/lxcao/article/details/52735632

在数据传输流程中，json是以文本，即字符串的形式传递的，而JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键。例如：

JSON字符串:

var str1 = '{ "name": "cxh", "sex": "man" }';

JSON对象:

var str2 = { "name": "cxh", "sex": "man" };

一、JSON字符串转换为JSON对象

要运用上面的str1，必须运用下面的要领先转化为JSON对象：

//由JSON字符串转换为JSON对象

var obj = eval('(' str ')');

或者

var obj = str.parseJSON(); //由JSON字符串转换为JSON对象

或者

var obj = JSON.parse(str); //由JSON字符串转换为JSON对象

然后，就可以这样读取：

Alert(obj.name);

Alert(obj.sex);

特别留心：如果obj本来就是一个JSON对象，那么运用 eval（）函数转换后（哪怕是多次转换）还是JSON对象，但是运用 parseJSON（）函数处理后会有疑问（抛出语法异常）。

二、可以运用 toJSONString()或者全局要领 JSON.stringify()将JSON对象转化为JSON字符串。

例如：

var last=obj.toJSONString(); //将JSON对象转化为JSON字符

或者

var last=JSON.stringify(obj); //将JSON对象转化为JSON字符

alert(last);

===============================================

10、$.post() 返回的是jqXHR对象(jQuery 1.4及之前版本，该参数为原生的XMLHttpRequest对象)。

type可选/String类型指定请求返回的数据类型，可以为xml、 html、 script、 json、 jsonp、text。如果省略该参数，jQuery将会根据请求进行智能猜测，猜测范围为：xml、 json、 script或html。

11、实现跨域的方法：http://www.cnblogs.com/fanyx/p/5775939.html

1、代理

这种方式是通过后台(ASP、PHP、JAVA、ASP.NET)获取其他域名下的内容，然后再把获得内容返回到前端，这样因为在同一个域名下，所以就不会出现跨域的问题

2、JSONP：JSONP请求不是一个真正的Ajax调用。它将一个脚本标签到您的网页和浏览器然后请求脚本SRC文件。生成的脚本，返回执行和沟通后的结果通过JavaScript执行（调用回调函数），这是为什么要设置jsonpcallback的原因。因为请求是通过一个脚本标签插入而不是直接的Ajax调用生成的，是没有能力去设置请求头。为了防止被攻击，对jsonpcallback的值要进行匹配，屏蔽常见特殊字符” <> ()’”;. {}“，以下这些字符，经常会用到xss里面的，防止xss攻击。

3、XHR2（推荐方法）

“XHR2” 全称 “XMLHttpRequest Level2” 是HTML5提供的方法，对跨域访问提供了很好的支持，并且还有一些新的功能。

* IE10一下的版本都不支持

* 只需要在服务器端头部加上下面两句代码：

　　header( "Access-Control-Allow-Origin:*" ); http://www.cnblogs.com/shikyoh/p/4959562.html

　　header( "Access-Control-Allow-Methods:POST,GET" );

12、get方法，参数在url里，post方法，参数在request body 里

13、ajax的5种状态：http://www.jb51.net/article/53848.htm
(0) UNINITIALIZED
未初始化 The object has been created but not initialized. (The open method has not been called.)
（xml(标准化越来越近了)HttpRequest）对象已经创建，但尚未初始化（还没有调用open方法）。
(1) LOADING
载入 The object has been created, but the send method has not been called.
（xml(标准化越来越近了)HttpRequest）对象已经创建，但尚未调用send方法。
(2) LOADED
载入完成 The send method has been called, but the status and headers are not yet available.
已经调用send方法，（HTTP响应）状态及头部还不可用。
(3) INTERACTIVE
交互 Some data has been received. Calling the responseBody and responseText properties at this state to obtain partial results will return an error, because status and response headers are not fully available.
已经接收部分数据。但若在此时调用responseBody和responseText属性获取部分结果将会产生错误，因为状态和响应头部还不完全可用。
(4) COMPLETED
完成 All the data has been received, and the complete data is available in the responseBody and responseText properties.
已经接收到了全部数据，并且在responseBody和responseText属性中可以提取到完整的数据。