AJAX介绍和创建XHR对象

AJAX:异步 JavaScript 和 XML。简短地说,在不重载整个网页的情况下,AJAX通过后台加载数据,并在网页上进行显示。

AJAX包括以下几个步骤:

  1. 创建AJAX对象;
  2. 发出HTTP请求;
  3. 接收服务器传回的数据;
  4. 更新页面数据;
  • Ajax的工作原理如图所示:
    AJAX

总结:

  • AJAX通过原生的XMLHttpRequest对象发出HTTP请求,得到服务器返回的数据后再进行处理。
  • AJAX技术的核心就是XMLHttpRequest对象(简称:XHR),这是微软首次引入的一个特性,其他浏览器厂商后来都提供了相同的实现。
  • IE5中的XHR对象是通过ActiveX对象实现的,而IE7+及其他标准浏览器都支持原生的XHR对象。
  • 创建一个XHR对象,也叫做实例化一个XHR对象,因为XMLHttpRequest()是一个构造函数。

XHR的用法介绍

  1. open()方法:设置: HTTP方法和要获取资源的URL;
  2. send()方法:发送请求:
  3. onload属性:设置: 成功获取数据后将要运行的函数;
  4. onerror属性:设置: 出现错误后将要运行的函数;
  5. responseText属性:设置: 存储异步请求响应的文本;

HTTP头部信息

请求头用于说明是谁或什么在发送请求、请求源于何处,或者客户端的喜好及能力。服务器可以根据请求头部给出的客户端信息,试着为客户端提供更好的响应。XHR对象也提供了操作这两种头部信息(请求头和响应头)的方法。

  1. Accept:告诉WEB服务器自己接受什么介质类型,/ 表示任何类型,type/* 表示该类型下的所有子类型,type/sub-type。
  2. Accept-Charset:浏览器告诉服务器自己能接收的字符集。
  3. Accept-Encoding:浏览器申明自己接收的编码方法,通常指定压缩方法,是否支持压缩,支持什么压缩方法(gzip,deflate)。
  4. Accept-Language:浏览器申明自己接收的语言。语言跟字符集的区别:中文是语言,中文有多种字符集,比如big5,gb2312,gbk等等。
  5. Cache-Control:指定请求和响应遵循的缓存机制。
  6. Connection:表示是否需要持久连接。如果Servlet看到这里的值为“Keep-Alive”,或者看到请求使用的是HTTP 1.1,它就表示持久连接。
  7. Cookie:当前域名下的Cookie。
  8. Referer: 浏览器向WEB 服务器表明自己是从哪个网页URL获得点击当前请求中的网址/URL。
  9. User-Agent:浏览器表明自己的身份(是哪种浏览器)。例如:User-Agent:Mozilla/5.0

GET与POST请求

  1. 由于GET方式在发送数据时是将参数拼接在URL上,传输数据会受到URL长度的限制,不同浏览器的长度限制不一样,所以GET方式会受到参数大小的限制,但是POST方式没有参数大小的限制
  2. 因为GET方式会将请求参数显示在地址栏上,而POST方式不会,所以POST方式相对来讲更安全
  3. GET方式有缓存,而POST方式没有缓存

JavaScript中的跨域请求

  • 受JS同源策略的影响,当在某一域名下请求其他域名,或在同一域名下请求不同端口的URL时,就会变成不被允许的跨域请求。127.0.0.1:8020

了解XDomainRequest对象

XDomainRequest表示JavaScript和Ajax的跨域请求,在IE8+可以使用
XDomainRequest包含以下几个部分:

  1. 事件
    1. onload事件:请求成功并返回对象时,被触发。
    2. onerror事件:当跨域请求发生错误时,被触发。
    3. onprogress事件:浏览器开始从服务器端接收数据时,被触发。
    4. ontimeout事件:出现超时情况,被触发。
  2. 方法
    1. abort方法:终止等待send
    2. open(XDomainRequest)方法:建立与服务器的链接
    3. send(XDomainRequest)方法:传输一个字符串数据给服务器处理
  3. 属性
    1. constructor属性:返回一个对象的构造函数的引用
    2. contentType属性:返回html请求或返回头部的content-type属性
    3. responseText属性:以字符串形式返回请求的body内容
    4. timeout属性:超时后返回的值。

JSON数据

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。

Json的语法可以表示成三种类型的值:
1. 简单值:可以在Json中表示字符串、数值、布尔值和null,但是不支持undefined;
2. 对象:作为一种复杂数据结构,表示一种无序的键值对,每个键值对中的值既可以是简单值,也可以是复杂数据类型的值。
3. 数组:作为一种复杂数据结构,表示一种有序值的列表,可以通过数组索引访问其中的值。数组中的元素可以是任何类型:简单值、对象、数组均可。
如:

1
2
3
4
var obj = {a: 'Hello', b: 'World'}; 
//这是一个对象,注意键名也是可以使用引号包裹的
var json = '{"a": "Hello", "b": "World"}';
//这是一个 JSON 字符串,本质是一个字符串

在Ajax中使用JSON数据

  1. JSON.parse():把Json格式的字符串转换为Json对象。
  2. JSON.stringify():把Json对象转换为Json格式的字符串。