AJAX和JSON的简单应用

AJAX

AJAX简介:

什么是AJAX:Asynchronous Javascript And Xml :异步js与xml.
同步请求:传统的Http请求:超链接、URL直接输入、表单提交.
异步请求:用户在操作当前页面时,当前页面不进行同步的刷新,而是从后台发送请求到服务器,并从后台接收响应并更新页面的一部分而不是全部.

异步的核心:浏览器提供的从后台发送请求和接收响应的能力.
RIA:Rich Internet Application:富互联网应用
AJAX:旧瓶装新酒,在已有的成熟技术之后添加了新的功能(XMLHttpRequest:浏览器中的一个内置对象,最早是MS(微软)在IE中从2005年开始添加的一个功能)

AJAX常用方法与属性

一.得到XMLHttpRequest对象,
a) var req = new XMLHttpRequest();//一般适用于chrome、firefox等浏览器
b) new ActiveXObject(“Msxmk2.XMLHTTP”);//适用于IE,还分新版和旧版(6以下)

二.常用方法
方法名 说 明
open(method,URL,async) 建立与服务器的连接
method参数指定请求的HTTP方法,典型的值是GET或POST
URL参数指请求的地址
async参数指定是否使用异步请求，其值为true或false
send(content) 发送请求
content参数指定请求的参数
setRequestHeader(header,value) 设置请求的头信息

三.常用属性
onreadystatechange：指定回调函数
readyState: XMLHttpRequest的状态信息

就绪状态码 说 明
0 XMLHttpRequest对象没有完成初始化
即：刚刚创建。
1 XMLHttpRequest对象开始发送请求
调用了open方法，但还没有调用send方法。请求还没有发出
2 XMLHttpRequest对象的请求发送完成
send方法已经调用，数据已经提交到服务器，但没有任何响应
3 XMLHttpRequest对象开始读取响应，还没有结束
收到了所有的响应消息头，但正文还没有完全收到
4 XMLHttpRequest对象读取响应结束
一切都收到了

status：HTTP的状态码
状态码 说 明
200 服务器响应正常
400 无法找到请求的资源
403 没有访问权限
404 访问的资源不存在
500 服务器内部错误
responseText：获得响应的文本内容
responseXML：获得响应的XML文档对象 documednt

注：就绪状态是4而且状态码是200，才可以处理服务器数据

如何使用AJAX

使用ajax实现异步请求发送

//1.设置发送异步请求的相关信息:请求发送、URL、是否是异步(可选项,默认是true)参数.req.open('GET/POST','url',true);//2.发送req.send();//Post方式//1.设置发送异步请求的相关信息:请求发送、URL、是否是异步(可选项,默认是true)、参数.req.open('POST','url',true);//2.需要设置请求头req.setRequestHeader('content-type','application/x-www-form-urlencoded');//3.发送req.send(参数);//用于接收异步请求的Servlet(服务端程序),响应的信息不是一个页面的内容,而是一些自定义的数据//用于更新发送异步请求页面中的一部分(不是全部).HTTP协议的状态码:200正确302重定向 404找不到资源500服务器内部错误reaponseTest:把响应的内容当成普通的纯文本处理//responseXML:把响应的内容转换成DOM对象处理

1).如何发送异步请求:
req.open(‘提交方式’,’URL’,是否为异步);
提交方式:GET、PSET
URL:提交到目标(Servlet)
是否为异步:布尔值,true异步(默认值),false同步

req.send();注意:如果提交方式为GET方式,则提交的参数应该带在URL上,所以调用send方法中应该为空,如果提交方式为POST方式,则提交的参数应该放在send方法的参数中,并且在调用send方法前设置请求头:req.setRequestHeader('content-type','application/x-www-form-urlencoded')

2).如何接收响应
(1)给req对象的onreadystatechange事件绑定函数(响应处理函数)
(2)判断req.readState的值为4(响应接收完成)时
(3)判断req.status响应的HTTP的状态码为200(正确)时

3).如何使用Jquery进行AJAX操作
$.get(‘URL’,’提交的值’,回调函数,’响应内容的类型’)
注意:提交的值有两种格式:
1.a=v1&b=v2;
2.JSON对象
回调函数接收一个参数,此参数就是服务器的响应信息,类型由第四个参数决定:
text:纯文本
json:JSON对象

$.post方法同上,但是设置编码简单

4).传递数据的格式:
a.XML(格式繁琐,浪费空间大)
b.JSON:一种轻量级的传递数据的格式(通用的规范,和语言无关)
books{
books{
name:thinking in java
}
}

JSON

JSON简单来说就是一些键值对,用大括号括起来
1.对象:{name1:value1,name2:value2}
一对大括号相当于一个对象,而其中的键值对,相当于属性名和属性值
2.集合:{{},{},{}}
原理:JavaScript中的对象和集合对应.
JavaScript内置对象,自定义对象

测试响应给浏览器一个JSON字符串

//定义一个JSON格式的字符串String json = "{'username':'user01','password':'123'}";//响应res.getWriter().print(json);