Ajj
A: Ajax
J: JSON
J: jQuery
-----------------------------------------------
JSON
Javascript Object Notation
JS对象标记
class User
{
public int Id{get;set;}
public string Name{get;set;}
public string Phone{get;set;}
// public string HomeAddress{get;set;}
// public string OfficeAddreess{get;set;}
}
User u=new User{Id=1001,Name="aaa"};
User[] array= new User[2];
array[0]=new User{Id=1001,Name="aaa"};
array[1]=new User{Id=1002,Name="bbb"};
User[] array={
new User{Id=1001,Name="aaa"},new User{Id=1002,Name="bbb"}}
var u={"Id":1001,"Name":"aaa","Phone":"13912345678"}
var array=[{"Id":1001,"Name":"aaa","Phone":"13912345678"},
{"Id":1002,"Name":"bbb","Phone":"1381111111"}
]
json格式 以键值对的形式描述对象的属性名与属性值
单一对象
{k1:v1,k2:v2,.........}
对象数组
[{k1:v1,k2:v2,......},{},{}]
class ShipAddress
{
public string Home{get;set;}
public string Office{get;set;}
}
var add={"Home":"北京海淀","Office":"北京朝阳"}
class User
{
public int Id{get;set;}
public string Name{get;set;}
public string Phone{get;set;}
public ShipAddress Address{get;set;}
}
JSON表示复合对象
var u={
"Id":1001,"Name":"aaa","Phone":"13912345678",
"Address":{"Home":"北京海淀","Office":"北京朝阳"}
}
{k1:v1,K2:v2,k3:v3, k4: { json对象 } }
---------------------------------------------------------------------------------------------------------------------
Ajax
Asysnchronization JavaScript and XML
在客户端浏览器使用XmlHttpRequeset对象向服务端发送请求，
服务端对客户端应答文本数据,
客户端在不刷新页面的情况下，实现与服务端的数据交互
XmlHttpRequeset对象(2+4+1 七大属性事件与方法)
open(type,url,asyn)方法 打开与服务端的连接
type:请求类型 post,get
url: 服务端接收请求的路径
asyn:是否异步 true/false
send(data)方法 发送请求
data:向服务端提交的数据
1. get请求 不需要data参数 因为get请求的数据存在于url
2. post请求 需要data参数 格式 a=1&b=2&c=3
readyState属性
0,1,2,3,4
status属性
200表示服务端正常响应
404,500,403
responseText属性
responseXML属性
事件onreadystatechange
为该事件提供事件处理程序,也就是一个js函数,响应请求状态改变事件
1创建XmlHttpRequest对象
2订阅onreadystatechange事件
3.打开连接
4.如果是post请求,设置请求头部信息
5发送请求,如果是post请求,send方法需要参数
案例
在注册时 判断账号是否可用
1 服务端新建一个ashx(一般处理程序) ,接收请求
2.客户端页面发送ajax 请求
3. 服务端对客户端的请求作出应答
4. 客户端根据应答 在页面提示
-----------------------------------------------------
jQuery中的 ajax操作函数
1. get(url,data,callback,type)
url:请求路径
data:请求数据 json格式
callback:请求完成后的回调函数
type:服务端返回的数据格式 text,xml,json,html,javascript
2. getJSON(url,data,callback)
url:请求路径
data:请求数据 json格式
callback:请求完成后的回调函数
3. post(url,data,callback,type)
url:请求路径
data:请求数据 json格式
callback:请求完成后的回调函数
type:服务端返回的数据格式 text,xml,json,html,javascript
4. ajax(settings)
settings:基于json格式的请求配置
{ "url":请求路径,
"data":请求数据,
"dataType": 服务器返回的数据格式,
"type:请求类型 post,get,
"cache":是否缓存
"global": 是否触发全局事件,
"beforeSend":请求开始的时候
"success": 请求成功后的回调函数,
"complete":请求完成后的回调函数,
"error":错误的回调函数,
}
----------------------------------------------------
原生ajax的post请求
1. 创建XMLHttpRequest
2. 订阅事件
3. 打开连接
4. 设置请求头信息
5. 发送数据
jQuery中的ajax操作,方法参数中的请求数据都是json格式
1. get 方法
2. post 方法
[{"id":21,"name":"name21","price":923},{"id":22,"name":"name22","price":663},{"id":23,"name":"name23","price":599},{"id":24,"name":"name24","price":653},{"id":25,"name":"name25","price":287},{"id":26,"name":"name26","price":773},{"id":27,"name":"name27","price":898},{"id":28,"name":"name28","price":201},{"id":29,"name":"name29","price":234},{"id":30,"name":"name30","price":267}]
--------------------------------------------------------------
使用ajax+json+jquery实现模拟分页
1. 服务端新建ProductQuery.ashx,
根据客户端请求的page页号,将查询结果以json字符串返回
2. 客户端向服务端发送ajax请求,获取json数据
3. 根据获取的json数据,动态创建table, 并且显示
-----------------------------------------------------------------------------
使用JS文件存储数据
1. 服务端根据数据库生成json格式的数据 存在js文件中
var xxxx=json数据
2. 客户端浏览器访问页面的时候，加载js文件
js文件可以缓存在客户端，文件的内容实际就是js变量的声明
相关页面引入该js文件,实际就可以访问js变量
3.如何同步数据
a. 服务端生成的js文件具有版本名 product_年月日时分秒.js
b. 修改相关引入该js文件的页面代码,
c. 浏览器访问页面的时候，因为js文件名与客户端缓存的js文件名不一致,
会重新加载js文件,
-------------------------------------------------------------------------------
ajax全局事件
1. ajaxStart() 响应ajax请求开始事件
2. ajaxCompleted() 响应ajax请求完成事件,
无论服务端返回什么状态码,200,404,500
3. ajaxSuccess() 响应ajax成功事件 状态码200
4. ajaxError() 服务端返回错误状态码 403,404,500....
-----------------------------------------------------------------------------
全局事件与ajax方法的选择策略
1. 如果页面多个ajax请求 具有相同的呈现逻辑 可以选择全局事件
2. 如果页面多个ajax 请求，具有各自不同的呈现逻辑, 可以使用ajax方法进行个性定制
------------------------------------------------------------------------------
购物车页面
1.初始加载的时候,向服务器发送ajax请求,获取客户的地址列表
2.点击提交按钮,向服务器发送ajax请求,提交订单