[关闭]
@EncyKe 2016-09-29T09:57:14.000000Z 字数 5589 阅读 5172

Ajax + JSON

前端 JavaScript



1. Ajax

1.1. 简介

Ajax (Asynchronous JavaScript and XML),即异步的JavaScript和XML。Ajax不是语言,而是一种技术,可以在不完整加载整个网页的前提下,加载网页的部分,即使用Ajax技术可以异步局部加载网页。

实现:有了XMLHttpRequest对象才有了异步处理,才有了ajax;才能:
1. 运用HTML和CSS实现页面,表达信息;
2. 运用XMLHttpRequest和web服务器进行数据的异步交换;
3. 运用JavaScript操作DOM,实现动态局部刷新;

1.2. HTTP基础

1.2.0 HTTP简介

定义: HTTP是计算机通过网络通讯的规则,使浏览器(客户)能够向服务器(web服务器)请求信息和服务。
特点: HTTP是一种无状态的协议:
1. 不建立持久的连接;
2. 没有记忆(不会保留信息);

HTTP客户端发起请求,创建端口;
HTTP服务器在端口监听客户端请求;
HTTP服务器向客户端返回状态和内容;

1.2.1 HTTP请求步骤

参考:HTTP基础:同步&异步
输入链接或者刷新之后——

  1. 浏览器搜索自身DNS缓存;
    chrome://net-internals/#dns可查看chrome自身的DNS缓存
  2. 若1无缓存或缓存失效:搜索操作系统DNS缓存;
  3. 若2失败:读取本地Host文件;
  4. 若3失败:浏览器发起一个DNS的一个系统调用;
    1) 宽带运营商服务器查看自身缓存;
    2) 运营商服务器发起一个迭代DNS解析的请求;
    3) 运营商服务器把结果返回操作系统内核同时缓存起来;
    4) 操作系统内核把结果返回给浏览器;
    5) 浏览器获取域名对应的ip地址;
  5. 浏览器获取ip后,发起HTTP“三次握手”;建立TCP/IP连接;
  6. 浏览器向服务器发送HTTP请求,如GET方法或POST方法;
  7. 服务器端接收请求,由路径参数进行后端处理后把数据 (如HTML页面代码) 返回给浏览器,同时应答头信息;
  8. 浏览器获取数据后进行解析、渲染,根据所需获取JS、CSS和图片静态资源,这三类数据同样要经过以上7个步骤获得;
  9. 浏览器解析现有资源代码,渲染页面呈现给客户;

1.2.2. HTTP请求

组成:

  1. 请求方法和动作;
  2. 请求Url
  3. 请求头,包含客户端环境信息、身份验证信息等;
  4. 请求体,即请求正文;

1.2.3. HTTP方法

含GET、POST、PUT、DELETE、HEAD、TRACE、OPTIONS等多种;
GET:
1. 一般用于信息获取、查询而非修改;
2. 使用Url传递参数;
3. 发送的信息量有限制,2000个字符左右;

POST:
1. 一般用于修改服务器上资源;
2. 发送的信息量无限制;

1.2.4. HTTP响应

组成:
1. 状态码
2. 响应头,包含服务器类型、日期、内容类型、长度等;
3. 响应体,即响应正文;

HTTP状态码
1XX:请求已接收,正在处理;
2XX:请求接受成功,处理完成,成功返回:200即ok;
3XX:请求重定向;即请求没有成功,客户须进一步操作;
4XX:客户端错误:400有语法错误不能理解,401请求未授权,403拒绝提供服务,404未找到改地址;
5XX:服务器错误:500服务器发生未知错误,503服务器端当前不能处理;

1.3. XMLHttpRequest对象

1.3.1. 实例化一个XHR对象:

  1. var request = new XMLHttpRequest();

1.3.2. 判断是否支持XHR对象:

  1. var request;
  2. if (window.XMLHttpRequest)
  3. {
  4. request = new XMLHttpRequest(); //IE 7+...
  5. }
  6. else
  7. {
  8. request = new ActiveXObject("Microsoft.XMLHTTP"); //IE 6, IE 5
  9. }

1.3.3. open()方法:

  1. open(method,url,async)
  1. method:请求的方式,大小写不敏感;
  2. url:请求地址,相对/绝对均可;
  3. async:异步:true (默认值);同步:false;

1.3.4. setRequestHeader()方法:

  1. setRequestHeader("Content-type": "application/x-www-form-urlencode")
  1. 需写在open(),send()之间;用以创建头信息;
  2. POST需设置此方法;

1.3.5. send()方法:

  1. send(string)

1.3.6. 属性值:

A readyState

0:请求未初始化,open未被调用;
1:服务器连接已建立,open已调用;
2:请求已接收,已接到头信息;
3:请求处理中,已接到响应主体;
4:请求已完成,响应已就绪;

B status:以数字形式返回HTTP状态码;
C statusText:以文本形式返回HTTP状态码;
D getAllResponseHeader():获取所有的响应头;
E getResponseHeader():查询响应中的某个字段的值;
F responseText:获取字符形式的相应数据
G responseXML:获取XML形式的相应数据

1.4. jQuery的Ajax应用

参考:jQuery:Ajax应用

1.4.1. ajax()加载服务器数据

该法是最底层、功能最强大的请求服务器数据的方法,它不仅可以获取服务器返回的数据,还能向服务器发送请求并传递数值:
语法:jQuery.ajax([settings])或$.ajax([settings])

参数settings为发送ajax请求时的配置对象,在该对象中:
url:发送请求的地址;
data:对象,为请求时传递的数据;
dataType:服务器返回的数据类型,一般可设置为json;
type:发送数据请求的方式,默认为get;
success:请求成功时执行的的回调函数;
error:请求失败时调用的函数;

1.4.2. 解析JSON

eval('('+jsondata+')'):不考虑JSON是否合法,不识别恶意代码而直接执行,慎用;
JSON.parse(jsondata):相比eval()更加友好,会校检json数据,若不合理不予解析;

JSON在线校验

1.4.3. load()异步请求数据

通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中:
语法:load(url,[data],[callback])

 参数url为加载服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。

1.4.4. getJSON()异步加载JSON数据

通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中:
语法:jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])

url参数为请求加载json格式文件的服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。

1.4.5. getScript()异步加载并执行JS文件

异步请求并执行服务器中的JavaScript文件:
语法:jQuery.getScript(url,[callback])或$.getScript(url,[callback])

参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数。

1.4.6. get()以GET方式从服务器获取数据

采用GET方式向服务器请求数据,并通过方法中回调函数的参数返回请求的数据:
语法:$.get(url,[callback])

参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数。

1.4.7. post()以POST方式从服务器发送数据

向服务器发送数据,服务器接收到数据之后,进行处理,并将处理结果返回页面:
语法:$.post(url,[data],[callback])

参数url为服务器请求地址,可选项data为向服务器请求时发送的数据,可选项callback参数为请求成功后执行的回调函数。

1.4.8. serialize()序列化表单元素值

将表单中有name属性的元素值进行序列化,生成标准URL编码文本字符串,直接可用于ajax请求:
语法:$(selector).serialize()

其中selector参数是一个或多个表单中的元素或表单元素本身。

1.4.9. ajaxSetup()设置全局Ajax默认选项

设置Ajax请求的一些全局性选项值,设置完成后,后面的Ajax请求将不需要再添加这些选项值:
语法:jQuery.ajaxSetup([options])或$.ajaxSetup([options])

可选项options参数为一个对象,通过该对象设置Ajax请求时的全局选项值。

1.4.10. ajaxStart()ajaxStop()绑定Ajax事件

ajaxStart()用于在Ajax请求发出前触发函数,ajaxStop()用于在Ajax请求完成后触发函数:
语法:$(selector).ajaxStart(function())和$(selector).ajaxStop(function())

其中,两个方法中括号都是绑定的函数,当发送Ajax请求前执行ajaxStart()方法绑定的函数,请求成功后,执行ajaxStop ()方法绑定的函数。

1.5. 跨域处理

对一个URL——
协议: http://
子域名: www.
主域名: xxx.com
端口号: 8080 (默认:80可省略)
请求资源地址: /xxx/xxx
以上一个不同即为跨域。

方法一:使用代理

在后台调用他域的服务,然后传回前端,代理方法属于后台方法。

方法二:使用JSONP

只针对GET,不支持POST;
在页面中设置:

  1. <script>
  2. function jsonp(json){
  3. ...
  4. }
  5. </script>
  6. <script src="他域url/jsonp.js"></script>
  1. datatype:json改为datatype:jsonp
  2. 添加jsonp:自定义参数名称
  3. 设置$jsonp = $_GET["自定义参数名称"];

方法三:使用XMLHttpRequest Level2 (H5专有)

需要支持XmlHttpRequest level2的浏览器;
在服务器端进行改造:

  1. header("Access-Control-Allow-Origin:*");//权限所有都可以
  2. header("Access-Control-Allow-Methods:POST,GET");

2. JSON

2.1. 定义

JSON (JavaScript Object Notation),即JS对象表示法,为轻量级数据交换格式;其数据类型包括:标量 (scalar,字符串或数字)、序列 (sequence,若干个并列数据,数组或列表)、映射 (mapping,又名散列hash、字典dictionary,键值对);

2.2. 四大基本规则

  1. 并列数据间以逗号,分隔;
  2. 映射用冒号:表示;
  3. 映射的集合(对象)用大括号{}表示;
  4. 并列数据的集合(数组)用方括号[]表示;

2.3. 优点

  1. 格式简洁、易读、经压缩而占用带宽小;
  2. 支持C、C#、Java、JavaScript、Perl、PHP、Pyhon、Ruby等多种语言;

2.4. 缺点

  1. 字符集必须是Unicode,收约束性强;
  2. JSON语法过于严谨;

2.5. 其它Web传输常用类型

  1. XML:不易读、数据文档较大;
  2. Serialize:类似JSON,但将变量序列化,返回一个具有变量类型和结构的字符串表达式;
  3. Array():基本数据类型,不能用于数据传输和交替,只用作缓存;

参考文档:
HTTP协议详解
HTTP请求和相应详解

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注