JavaScript高级④-AJAX与JSON
AJAX介绍和创建XHR对象
AJAX:异步 JavaScript 和 XML。简短地说,在不重载整个网页的情况下,AJAX通过后台加载数据,并在网页上进行显示。
AJAX包括以下几个步骤:
- 创建AJAX对象;
- 发出HTTP请求;
- 接收服务器传回的数据;
- 更新页面数据;
- Ajax的工作原理如图所示:
总结:
- AJAX通过原生的XMLHttpRequest对象发出HTTP请求,得到服务器返回的数据后再进行处理。
AJAX技术的核心就是XMLHttpRequest对象
(简称:XHR),这是微软首次引入的一个特性,其他浏览器厂商后来都提供了相同的实现。- IE5中的XHR对象是通过ActiveX对象实现的,而IE7+及其他标准浏览器都支持原生的XHR对象。
- 创建一个XHR对象,也叫做实例化一个XHR对象,因为XMLHttpRequest()是一个构造函数。
XHR的用法介绍
open()
方法:设置: HTTP方法和要获取资源的URL;send()
方法:发送请求:onload
属性:设置: 成功获取数据后将要运行的函数;onerror
属性:设置: 出现错误后将要运行的函数;responseText
属性:设置: 存储异步请求响应的文本;
HTTP头部信息
请求头用于说明是谁或什么在发送请求、请求源于何处,或者客户端的喜好及能力。服务器可以根据请求头部给出的客户端信息,试着为客户端提供更好的响应。XHR对象也提供了操作这两种头部信息(请求头和响应头)的方法。
Accep
t:告诉WEB服务器自己接受什么介质类型,/ 表示任何类型,type/* 表示该类型下的所有子类型,type/sub-type。Accept-Charset
:浏览器告诉服务器自己能接收的字符集。Accept-Encoding
:浏览器申明自己接收的编码方法,通常指定压缩方法,是否支持压缩,支持什么压缩方法(gzip,deflate)。Accept-Language
:浏览器申明自己接收的语言。语言跟字符集的区别:中文是语言,中文有多种字符集,比如big5,gb2312,gbk等等。Cache-Control
:指定请求和响应遵循的缓存机制。Connection
:表示是否需要持久连接。如果Servlet看到这里的值为“Keep-Alive”,或者看到请求使用的是HTTP 1.1,它就表示持久连接。Cookie
:当前域名下的Cookie。Referer
: 浏览器向WEB 服务器表明自己是从哪个网页URL获得点击当前请求中的网址/URL。User-Agent
:浏览器表明自己的身份(是哪种浏览器)。例如:User-Agent:Mozilla/5.0
GET与POST请求
- 由于
GET方式
在发送数据时是将参数拼接在URL上,传输数据会受到URL长度的限制
,不同浏览器的长度限制不一样,所以GET方式会受到参数大小的限制
,但是POST方式没有参数大小的限制
。 - 因为GET方式会将请求参数显示在地址栏上,而POST方式不会,所以
POST方式相对来讲更安全
。 GET方式有缓存,而POST方式没有缓存
。
JavaScript中的跨域请求
- 受JS同源策略的影响,当在某一域名下请求其他域名,或在同一域名下请求不同端口的URL时,就会变成不被允许的跨域请求。127.0.0.1:8020
了解XDomainRequest对象
XDomainRequest表示JavaScript和Ajax的跨域请求,在IE8+可以使用
。
XDomainRequest包含以下几个部分:
- 事件
onload
事件:请求成功并返回对象时,被触发。onerror
事件:当跨域请求发生错误时,被触发。onprogress
事件:浏览器开始从服务器端接收数据时,被触发。ontimeout
事件:出现超时情况,被触发。
- 方法
abort
方法:终止等待sendopen(XDomainRequest)
方法:建立与服务器的链接send(XDomainRequest)
方法:传输一个字符串数据给服务器处理
- 属性
constructor
属性:返回一个对象的构造函数的引用contentType
属性:返回html请求或返回头部的content-type属性responseText
属性:以字符串形式返回请求的body内容timeout
属性:超时后返回的值。
JSON数据
JSON(JavaScript Object Notation
, JS 对象简谱) 是一种轻量级的数据交换格式。它基于ECMAScript
(欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
Json的语法可以表示成三种类型的值:
1. 简单值:可以在Json中表示字符串、数值、布尔值和null,但是不支持undefined
;
2. 对象:作为一种复杂数据结构,表示一种无序的键值对,每个键值对中的值既可以是简单值,也可以是复杂数据类型的值。
3. 数组:作为一种复杂数据结构,表示一种有序值的列表,可以通过数组索引访问其中的值。数组中的元素可以是任何类型:简单值、对象、数组均可。
如:
1 | var obj = {a: 'Hello', b: 'World'}; |
在Ajax中使用JSON数据
JSON.parse()
:把Json格式的字符串转换为Json对象。JSON.stringify()
:把Json对象转换为Json格式的字符串。
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 H52E5!
评论