Ajax + JSON
来源:互联网 发布:网店商城源码 编辑:程序博客网 时间:2024/06/04 18:30
- Ajax + JSON
- 1. Ajax
- 1.1. 简介
- 1.2. HTTP基础
- 1.2.0 HTTP简介
- 1.2.1 HTTP请求步骤
- 1.2.2. HTTP请求
- 1.2.3. HTTP方法
- 1.2.4. HTTP响应
- 1.3. XMLHttpRequest对象
- 1.3.1. 实例化一个XHR对象:
- 1.3.2. 判断是否支持XHR对象:
- 1.3.3. open()方法:
- 1.3.4. setRequestHeader()方法:
- 1.3.5. send()方法:
- 1.3.6. 属性值:
- A readyState
- B status:以数字形式返回HTTP状态码;
- C statusText:以文本形式返回HTTP状态码;
- D getAllResponseHeader():获取所有的响应头;
- E getResponseHeader():查询响应中的某个字段的值;
- F responseText:获取字符形式的相应数据
- G responseXML:获取XML形式的相应数据
- 1.4. jQuery的Ajax应用
- 1.4.1. ajax()加载服务器数据
- 1.4.2. 解析JSON
- 1.4.3. load()异步请求数据
- 1.4.4. getJSON()异步加载JSON数据
- 1.4.5. getScript()异步加载并执行JS文件
- 1.4.6. get()以GET方式从服务器获取数据
- 1.4.7. post()以POST方式从服务器发送数据
- 1.4.8. serialize()序列化表单元素值
- 1.4.9. ajaxSetup()设置全局Ajax默认选项
- 1.4.10. ajaxStart()和ajaxStop()绑定Ajax事件
- 1.5. 跨域处理
- 方法一:使用代理
- 方法二:使用JSONP
- 方法三:使用XMLHttpRequest Level2 (H5专有)
- 2. JSON
- 2.1. 定义
- 2.2. 四大基本规则
- 2.3. 优点
- 2.4. 缺点
- 2.5. 其它Web传输常用类型
- 1. Ajax
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基础:同步&异步
在输入链接或者刷新之后——
- 浏览器搜索自身DNS缓存;
chrome://net-internals/#dns
可查看chrome自身的DNS缓存 - 若1无缓存或缓存失效:搜索操作系统DNS缓存;
- 若2失败:读取本地Host文件;
- 若3失败:浏览器发起一个DNS的一个系统调用;
1) 宽带运营商服务器查看自身缓存;
2) 运营商服务器发起一个迭代DNS解析的请求;
3) 运营商服务器把结果返回操作系统内核同时缓存起来;
4) 操作系统内核把结果返回给浏览器;
5) 浏览器获取域名对应的ip地址; - 浏览器获取ip后,发起HTTP“三次握手”;建立TCP/IP连接;
- 浏览器向服务器发送HTTP请求,如GET方法或POST方法;
- 服务器端接收请求,由路径参数进行后端处理后把数据 (如HTML页面代码) 返回给浏览器,同时应答头信息;
- 浏览器获取数据后进行解析、渲染,根据所需获取JS、CSS和图片静态资源,这三类数据同样要经过以上7个步骤获得;
- 浏览器解析现有资源代码,渲染页面呈现给客户;
1.2.2. HTTP请求
组成:
- 请求方法和动作;
- 请求Url;
- 请求头,包含客户端环境信息、身份验证信息等;
- 请求体,即请求正文;
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对象:
var request = new XMLHttpRequest();
1.3.2. 判断是否支持XHR对象:
var request;
if (window.XMLHttpRequest)
{
request = new XMLHttpRequest(); //IE 7+...
}
else
{
request = new ActiveXObject("Microsoft.XMLHTTP"); //IE 6, IE 5
}
1.3.3. open()
方法:
open(method,url,async)
method
:请求的方式,大小写不敏感;url
:请求地址,相对/绝对均可;async
:异步:true (默认值);同步:false;
1.3.4. setRequestHeader()
方法:
setRequestHeader("Content-type": "application/x-www-form-urlencode")
- 需写在open(),send()之间;用以创建头信息;
- POST需设置此方法;
1.3.5. send()
方法:
send(string)
string
:GET因信息置于url中,故string可以缺省;POST请求须有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;
在页面中设置:
<script>
function jsonp(json){
...
}
</script>
<script src="他域url/jsonp.js"></script>
- 把
datatype:json
改为datatype:jsonp
; - 添加
jsonp:自定义参数名称
; - 设置
$jsonp = $_GET["自定义参数名称"];
。
方法三:使用XMLHttpRequest Level2 (H5专有)
需要支持XmlHttpRequest level2的浏览器;
在服务器端进行改造:
header("Access-Control-Allow-Origin:*");//权限所有都可以
header("Access-Control-Allow-Methods:POST,GET");
2. JSON
2.1. 定义
JSON (JavaScript Object Notation),即JS对象表示法,为轻量级数据交换格式;其数据类型包括:标量 (scalar,字符串或数字)、序列 (sequence,若干个并列数据,数组或列表)、映射 (mapping,又名散列hash、字典dictionary,键值对);
2.2. 四大基本规则
- 并列数据间以逗号
,
分隔; - 映射用冒号
:
表示; - 映射的集合(对象)用大括号
{}
表示; - 并列数据的集合(数组)用方括号
[]
表示;
2.3. 优点
- 格式简洁、易读、经压缩而占用带宽小;
- 支持C、C#、Java、JavaScript、Perl、PHP、Pyhon、Ruby等多种语言;
2.4. 缺点
- 字符集必须是Unicode,收约束性强;
- JSON语法过于严谨;
2.5. 其它Web传输常用类型
- XML:不易读、数据文档较大;
- Serialize:类似JSON,但将变量序列化,返回一个具有变量类型和结构的字符串表达式;
- Array():基本数据类型,不能用于数据传输和交替,只用作缓存;
- JSON+AJAX
- ajax+json
- Ajax + JSON
- Ajax JSON
- ajax+json
- Ajax & Json
- json+ajax
- ajax json
- json ajax
- json ajax
- Ajax+JSON
- Ajax&JSON
- Ajax、json
- ajax-json
- AJax json
- ajax&json
- Ajax +json
- Ajax + JSON
- 杭电 2015 青歌赛
- arm-linux-gcc安装教程
- offsetheight height clientHeight outerHeight等的区别
- 这些电视剧你童年时看过吗?
- JFreeChart spring web开发
- Ajax + JSON
- 知识点小记:HttpURLConneciton请求fir.im接口时返回404、setDoInput和setDoOutput
- 中国脑计划颠覆性创新之路五,用互联网从整体论角度破解大脑之谜
- poj 3539 Elevator
- java代码性能优化
- Codeforces Round #372 (Div. 2) B. Complete the Word
- 书签--android在线源码阅读
- 【技术分享】手把手教你“复活”乌云网
- Matlab 图像滤波