深入理解Ajax

深入理解Ajax

1 什么是AJAX ,AJAX原理

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML)通过在后台与服务器进行少量 数据交

换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分 进行更新。传统的

网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。

原理:XMLHttpRequest

2 使用异步加载获取JS数据至少两种方法?
post, get

3 什么是JSON,JSON的格式

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。JSON 语法是 JavaScript 对象表示 语法的子集。

数据在键值对中

   数据由逗号分隔

   花括号保存对象

   方括号保存数组

除了AJAX还有jsonp可以与后台交互

4 AJAX中的跨域问题:什么是跨域?如何解决跨域问题?

域不一样的,即为跨域,包括(协议,域名,端又号)

解决跨域问题方法：

• 1.// 指定允许其他域名访问

  header(‘Access-Control-Allow-Origin:*’);

• 2.使用jsonp

5 AJAX的流程是什么?

• 1.客户端产生js的事件

• 2.创建XMLHttpRequest对象 3.对XMLHttpRequest进行配置 4.通过AJAX引擎发送异步请求 5.服务器端接收请

求并且处理请求,返回html或者xml内容 6.XML调用一个callback()处理响应回来的内容 7.页面局部刷新

6 AJAX如何调用JSON数据？ xml.responseText

7 AJAX能够处理哪些格式的文件

• https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
  XMLHttpRequest2.0 新增了多种类型 支持txt,json,js,图片,文档等等…

8 AJAX实现表单验证用户注册流程

• 用户触发ajax请求,后台接又返回json格式字符串

9 JSON数据的解析方法

* 1.JSON.parse(json)

* 2.new Function(“return ” + json) (); 3.eval(“(”+json+”)”)

10 如何转化成JSON字符串

JSON.stringify(json)

11 说明异步请求的get和post方法的区别

1.使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来 

 2.使用Get请求发送数据量小,Post请求发送数据量大

12 列举AJAX的优势

传统的Web应用交互由用户触发一个HTTP请求到服务器,服务器对其进行处理后再返回一个新的 HTHL页到客户端, 每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、 只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新 读取整个页面。这个做法浪费了许多带宽,由于每次应用的交互都需要向服务器发送请求,应用的响应时间就 依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

与此不同,AJAX应用可以仅向服务器发送并取回必需的数据,它使用SOAP或其它一些基于XML的Web Service接又,并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减 少,结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成,所以Web 服务器的处理时间也减少了。

13 AJAX中创建请求的兼容性处理

var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest() : new     ActiveXObject("Microsoft.XMLHTTP");

14 对于request.status的http状态码 用于表示网页服务器HTTP响应状态的3位数字代

码。1,2,3,4,5开头的状态码分别代表什么(提示:404页面表示禁止访问等)

1xx(临时响应)表示临时响应并需要请求者继续执行操作的状态代码。

2xx (成功)表示成功处理了请求的状态代码。

3xx (重定向) 表示要完成请求,需要进一步操作。 通常,这些状态代码用来重定向。

4xx(请求错误) 这些状态代码表示请求可能出错,妨碍了服务器的处理。

5xx(服务器错误)这些状态代码表示服务器在尝试处理请求时发生内部错

误。 这些错误可能是服务器

15 下列对get和post的区别描述错误的是(C )

A、get比post更常用

B、get发送信息为明文发送,安全性较差

C、get的性能只有post的1/3

D、get传输数据是通过URL进行的

16 如何将js对象转化成JSON字符串( D )
A、JSON.parseInt() B、JSON.parse() C、JSON.string () D、JSON.stringify ()

17 AJAX流程

var xhr = window.XMLHttpRequest ?
new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP") ;
 /*创建 一个AJAX对象*/

xhr.open(type,url);

//请求方式为post时需要加上
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xhr.send();

xhr.onreadystatechange = function(){

    if(xhr.readyState === 4 && xhr.status === 200){
        //doSometing

        <!--解析数据-->
        var data = xhr.responseText;

        <!--回调函数-->
        callback(data);
        }
    }

18 AJAX的工作原理

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。 并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要 从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
Ajax其核心有JavaScript、XMLHTTPRequest、DOM对象组成,通过XmlHttpRequest对象来向服务器发异 步请求,从服务器获得数据,然后用JavaScript来操作DOM而更新页面。这其中最关键的一步就是从服务器获 得请求数据。

第一步:创建ajax对象(XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)) 第二步:判断数据传输方式(GET/POST)

第三步:打开链接 open()

第四步:发送 send() 当ajax对象完成第四步(onreadystatechange)数据接收完成,判断http响应状态(status)200-300之间或

者304(缓存)执行回调函数 注意:检测XMLHttpRequest对象的readyState属性,该属性表示请求/响应过程的当前活动阶段,属

性值如下:

0:未初始化。尚未调用open()方法

1:启动。已经调用open()方法,但尚未调用send()方法 2:发送。已经调用send()方法,但尚未接收到响应

3:接收。已经接收到部分响应数据

4: 完成。已经接收到全部响应数据,而且已经可以在客户端使用了(如果写原生的js ajax请求需要等到
readyState==4的时候再做处理)其他的js库已经做好处理了,放心使用

19 . Jsonp的意义,用法,优点和原理
JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更 好,在更加古老的浏览器中都 可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕后可以通 过调用callback的方式回传结果。
JSONP的缺点则是:它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请 求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
JSONP原理
JSONP的最基本的原理是:动态添加一个是一致的(qq空间就是大量采用这 种方式来实现跨域数据交换的)。JSONP是一种脚本注入(Script Injection)行为,所以有一定的安全隐患。

20 get与post两种方式的优缺点。

get:

get是从服务器上获取数据,post是向服务器传送数据; get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,IIS4
中最大量为80KB,IIS5中为100KB;
get安全性非常低,post安全性较高。但是执行效率却比Post方法好; get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在
URL中可以看到; 在做数据查询时,建议用Get方式;

post:

post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属 性所指的URL地址,用户看不到这个过程;
所以:包含机密信息的话,建议用Post数据提交方式;而在做数据添加、修改或删除时,建议用Post方 式。

21 一次完整的HTTP事务是怎样一个过程?

a.域名解析

b.发起TCP的三次握手 c.建立TCP连接后发起http请求 d.服务器端响应http请求,浏览器得到html码 e.浏览器解析html代码,并请求html代码中的资源 f.浏览器对页面进行渲染并呈现给客户

更多详细参考地址:http://www.360doc.com/content/14/0725/20/1073512_397054861.shtml

22 CORS是什么?对于跨域请求,如何将附带凭证(HTTP Cookie及HTTP认证信息) 的请求发送至服务器?

跨域请求一直是网页编程中的一个难题,在过去,绝大多数人都倾向于使用JSONP来解决这一问题。 不过现在,我们可以考虑一下W3C中一项新的特性——CORS(Cross-Origin Resource Sharing)了。CORS是现 代浏览器支持跨域资源请求的一种方式。
解决方法:
当你使用XMLHttpRequest发送请求时,浏览器发现该请求不符合同源策略,会给该请求加一个请求头: Origin,后台(php或者其它接收数据方)进行一系列处理,如果确定接受请求则在返回结果中加入一个响应 头:Access-Control-Allow-Origin;浏览器判断该相应头中是否包含Origin的值,如果有则浏览器会处理响应,我 们就可以拿到响应数据,如果不包含浏览器直接驳回,这时我们无法拿到响应数据。
更多参考地址:www.cnblogs.com/dojo-lzz/p/4265637.html
http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html

23 浅谈一下如何避免用户多次点击造成的多次请求。

我们在访问有的网站,输入表单完成以后,单击提交按钮进行提交以后,提交按钮就会变为灰色,
用户不能再单击第二次,直到重新加载页面或者跳转。这样,可以一定程度上防止用户重复提交导致应用程序
上逻辑错误。

还有很多其他的方式进行防止重复点击提交,如
1> 定义标志位: 点击触发请求后,标志位为false量;请求(或者包括请求后具体的业务流程处理)后,标志位为true
量。通过标志位来判断用户点击是否具备应有的响应。 2> 卸载及重载绑定事件:
点击触发请求后,卸载点击事件;请求(或者包括请求后具体的业务流程
处理)后,重新载入绑定事

件。
3> 替换(移除)按钮DOM 点击触发请求后,将按钮DOM对象替换掉(或者将之移除),自然而然此时不在具备点击事件;请求
(或者包括请求后具体的业务流程处理)后,给新的按钮DOM定义点击事件。 更多讲解参考:http://www.cnblogs.com/jinguangguo/archive/2013/05/20/3086925.html

24 异步加载的方式有哪些?

(1)defer,只支持 IE

(2)async:

(3)创建 script,插入到 DOM 中,加载完毕后 callBack