1.什么是ajax?
异步的javascript和xml AJAX 是一种用于创建快速动态网页的技术,AJAX技术基于Javascript和HTTP Request.
2.Ajax包含下列技术
- 使用CSS和XHTML来表示。
- 使用DOM模型来交互和动态显示。
- 使用 XML 和 XSLT 进行数据交换及相关操作;
- 使用XMLHttpRequest来和服务器进行异步通信。(最重要)
- 使用javascript来绑定和调用。
2、为什么要用ajax:
ajax的优点:
- 通过异步模式,提升了用户体验
- 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用
- Ajax引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载。
- 在不重新加载整个页面的情况下实现局部数据的刷新
- 使用异步方式与服务器通信,具有更加迅速的响应能力。
- 基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。
ajax的缺点:
- ajax不支持浏览器back按钮。
- 安全问题 AJAX暴露了与服务器交互的细节。
- 对搜索引擎的支持比较弱。
- 破坏了程序的异常机制。
- 不容易调试。
3.哪些地方需要ajax,哪些地方不需要
- 页面不进行跳转刷新的时候,异步处理数据的时候,表单自动补全功能----使用Ajax
- 提交后不再使用原页面,可以进行跳转刷新的,查询之类的功能,可以不用Ajax
4、Ajax请求总共有八种Callback
- onSuccess
- onFailure
- onUninitialized
- onLoading
- onLoaded
- onInteractive
- onComplete
- onException
5.ajax的几个参数
-
url: 发送请求的地址。
-
type: 请求方式(post或get)默认为get。
-
async: 同步异步请求,默认true所有请求均为异步请求。
-
timeout : 超时时间设置,单位毫秒
-
data:要求为Object或String类型的参数,发送到服务器的数据
-
cache:默认为true(当dataType为script时,默认为false), 设置为false将不会从浏览器缓存中加载请求信息。
-
dataType: 预期服务器返回的数据类型。
可用的类型如下:
- xml:返回XML文档,可用JQuery处理。
- html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。
- script:返回纯文本JavaScript代码。不会自动缓存结果。
- json:返回JSON数据。
- jsonp:JSONP格式。使用JSONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。
- text:返回纯文本字符串。
- success:请求成功后调用的回调函数,有两个参数。
(1) 由服务器返回,并根据dataType参数进行处理后的数据。
(2) 描述状态的字符串。 - error:要求为Function类型的参数,请求失败时被调用的函数。该函数有3个参数
(1) XMLHttpRequest对象
(2) 错误信息
(3) 捕获的错误对象(可选) - complete :function(XMLHttpRequest,status){ //请求完成后最终执行参数
6.ajax接受到的数据类型是什么?如何处理?
- String ,直接使用
- JSON串 ,转JSON使用
- JSON对象 ,直接循环使用
7.ajax交换模型
- 触发事件调用函数
- 创建XMlHttpRequest 对象open连接,send发送后台服务器
- 后台接收前端数据,根据业务需求访问数据库进行增删改查
- 数据库返回后台程序所需要的数据
- 后台拿到数据库数据,进行合理的处理,比如JSON串,返回给前端
- 前端接收到后台的响应数据,进行解析,根据业务需求动态操作页面元素
8、请介绍一下XMLhttprequest对象
- Ajax的核心是JavaScript对象XmlHttpRequest。
- 该对象在IE 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。
- 通过XMLHttpRequest对象,Web开发人员可以在页面加载以后进行页面的局部更新。
9、XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
有,IE中通过new ActiveXObject()得到,Firefox中通过newXMLHttpRequest()得到
10、介绍一下XMLHttpRequest对象的常用方法和属性
- open(“method”,”URL”) 建立对服务器的调用,第一个参数是HTTP请求 ,方式可以为GET,POST或任何服务器所支持的您想调用的方式。第二个参数是请求页面的URL。
- send()方法,发送具体请求
- abort()方法,停止当前请求
- readyState属性 请求的状态 有5个可取值0=未初始化 ,1=正在加载
2=已加载,3=交互中,4=完成 - responseText 属性 服务器的响应,表示为一个串
- reponseXML 属性 服务器的响应,表示为XML
- status 服务器的HTTP状态码,200对应ok 400对应not found
11、AJAX应用和传统Web应用有什么不同
- 在传统的Javascript编程中,如果想得到服务器端数据库或文件上的信息,或者发送客户端信息到服务器,需要建立一个HTML form然后GET或者POST数据到服务器端。用户需要点击”Submit”按钮来发送或者接受数据信息,然后等待服务器响应请求,页面重新加载。
- 因为服务器每次都会返回一个新的页面, 所以传统的web应用有可能很慢而且用户交互不友好。
- 使用AJAX技术, 就可以使Javascript通过XMLHttpRequest对象直接与服务器进行交互。
- 通过HTTP Request, 一个web页面可以发送一个请求到web服务器并且接受web服务器返回的信息(不用重新加载页面),展示给用户的还是通一个页面,用户感觉页面刷新,也看不到到Javascript后台进行的发送请求和接受响应。
12.Ajax和javascript的区别
- javascript是一种在浏览器端执行的脚本语言
- Ajax是一种创建交互式网页应用的开发技术 ,它是利用了一系列相关的技术其中就包括javascript。
- 在一般的web开发中,javascript是在浏览器端执行的,我们可以用javascript控制浏览器的行为和内容。
- 在 Ajax应用中,信息通过XML数据或者字符串 在浏览器和服务器之间传递
13、什么是XML
XML是扩展标记语言,能够用一系列简单的标记描述数据
14、XML的解析方式
常用的用dom解析和sax解析。dom解析是一次性读取xml文件并将其构造为DOM对象供程序使用,优点是操作方便,但是比较耗内存。Sax是按事件驱动的方式解析的,占用内存少,但是编程复杂
15、在浏览器端如何得到服务器端响应的XML数据
XMLHttpRequest对象的responseXML属性
16.点击按钮向后台发起请求,将返回的数据直接输出,如果3秒内没有获得返回的数据则显示“请求超时,请重新提交”,写代码
var ajaxTimeoutTest = $.ajax({
url:'', //请求的URL
timeout : 1000, //超时时间设置,单位毫秒
type : 'get', //请求方式,get或post
data :{}, //请求所传参数,json格式
dataType:'json',//返回的数据格式
success:function(data){ //请求成功的回调函数
alert("成功");
},
complete : function(XMLHttpRequest,status){ //请求完成后最终执行参数
if(status=='timeout'){//超时,status还有success,error等值的情况
ajaxTimeoutTest.abort();//终止请求
alert("超时");
}
}
});