AJAX的使用

AJAX

Asynchronous JavaScript And Xml :异步JS和XML

同步请求:指传统的在浏览器地址栏输入URL.点超链接.表单提交.发送的都是同步请求.
RIA : Rich Internet application:富 Internet应用. RIA技术有很多种,每个公司都有自己的RIA技术,AJAX只是其中一种.
也是应用最广最受欢迎的一种,主要是成本低.

异步:在不刷新当前页面的情况下,从当前页面的后台发送请求给服务器,并在后台接受响应并跟新当前页面的不部分
而不是全部,这样可以使用户在页面上的操作变的连惯,从而实现更丰富的页面效果,提升用户体验.

AJAX核心:浏览器从后台发送请求节后响应的能力.(最早是在2005年在IE浏览器首次引入了RIA引擎),是一个
XMLHttpRequest的内置对象(此对象属于浏览器).

如果使用:AJAX(GET):

获取XMLHttpRequest对象: var req = new XMLHttpRequest();

req.open(); //设置发送异步请求的参数
req.send(); //发送异步请求
req.onreadystatechange 时间绑定处理函数
在处理函数中判断req.readyState属性的值是否为4
4是正常接收响应信息完成(1 开始发送 2 发送完毕 3 开始接收)
判断req.status是否是200(req.status是HTTP的状态码)
进行处理,得到响应数据: req.responseText

POST方式:

发送异步请求时,如果使用POST方式
要提交的请求不能放在URL中,而是把查询字符串放到send方法中
在调用send发送之前,需要设置请求头.否则异步请求可以发送,但提交的参数无法发送到服务器.

在早期的AJAX中,使用XML格式来在服务器和浏览器之间传递数据的,所以一种更轻量化的数据格式来
替代XML.(JSON)

如何使用jQuery操作AJAX

导入jQuery
$( function(){ }) ;
$.get( url , params, function(){} , type)
url:字符串,请求发送的目标URL( 项目名称/XML文件中配置的Servlet地址)
params:
QueryString : ' username = admin & password = 123'
JSON对象:{ username:' admin ' : passwrod : ' 123 ' }

function(data){}: 回掉函数,当响应正常接收完成后调用此函数,响应信息当成参数传入此函数
响应信息的类型 : XML/html/script/json/text/_default

案例一:用户注册时提示用户名是否可用

需求分析:在用户注册的界面中,当用户填写完用户名之后,在用户名的输入框后面提示用户名是否可用.

技术分析:当用户输完用户名,需要发送异步请求的触发事件:
onblur:输入框失去焦点事件
onchange:当内容发生改变的事件

步骤分析:
创建一个注册页面,给用户名的输入框绑定onchange事件
当事件发生时,使用异步请求把用户当前输入的用户名提交到UserServlet.checkUsername
在UserServlet.checkUsername中,接受请求得到用户名
调用业务逻辑,检查用户是否存在于数据库中
返回结果(异步响应)

GoogleSuggest
需求分析:提交一个类似于百度的页面,当用户在输入框中输入内容时,随着内容的变化,输入框的下面
提示相关的关键字.输入中文.拼音.拼音简写都可以.

技术分析:
绑定事件: keypress/keyup事件
查询:数据库中保存的关键字必须有中文,拼音和拼音简写
响应:老式的AJAX使用XML做为数据传递的格式.但是XML太重,所以改用一种轻量级的数据格式
JSON
JSON:一种用字符串的形式表式数据的格式(语言无关),它是一个Map.
对象:{ key:value , key:value,..... key:{key2:value2} ,}
集合:[ {} ,{} ,{} ]
如何把服务器中的集合,转换成JSON的字符串,发回给浏览器(json-lib工具)
JSONObject.fromObject(obj).toString()
JSONArray.fromObject(obj).toString()

步骤分析:
1.创建一个页面,页面中有一个文件输入框和一个按钮,输入框响应keyup事件
2.当keyup事件发生时,发送一个异步请求到服务器,并提交输入框中当前的内容
3.接受请求,得到提交的关键字
4.调用业务逻辑,取得和关键字相关的所有提示项
5.把所有的提示想的集合转换成JSON,发回给浏览器
6.浏览器发送完异步请求之后的回调函数中接收响应信息(data)
7.遍历集合data集合,把其中的对象和关键字显示到输出框下面.

AJAX
异步JS与XML

作用:不离开当前页面从浏览器后台发请求给服务器,从后台接受响应信息,更新当前页面的一部分,而不是
全部,(整个页面不会发生加载事件)
核心:XMLHttpRequest内置对象(浏览器提供的)

使用方式:
var req=new XMLHttpRequest();
req.open(); //设置发送异步请求的参数
req.send() //发送
req.onreadystatechange//事件绑定函数进行响应的处理
req.readyState值为4时,说明响应内容接收完成
req.status属性值是否为200(正常)
req.responseTest属性是响应的内容

jQuery框架操作AJAX的方式

$.get/$post(url,params,function(data){},type)

url:地址
params:
查询字符串: ' username=admin & password=123 '
JSON对象:{ username:' admin ' , password : ' 123 ' ,salary:200 }
回调函数:当响应正常接收完成后调用的函数,此函数接收一个参数.
名字随意,一般是data.就是响应的内容
type:返回值得类型(json/text)
JSON:轻量级的数据格式(语言无关)
对象:{ key:value.key:value,key2:{key21:value21,key22:value22} }
集合:[ {},{},{} ]
json-lib
JSONObject.fromObject(obj).toString()
JSONArray.formObject(collection),toString()

 

SQL语句:
select * from tb_keyword where chineseword like ‘%key%’ or pinyin like ‘%key%’ or jianxie like ‘%key%’;

CREATE TABLE tb_keyword(
id VARCHAR(32) PRIMARY KEY,
chineseword VARCHAR(30),
pinyin VARCHAR(30),
jianxie VARCHAR(30)
);
INSERT INTO tb_keyword VALUES('k001','三国演义','sanguoyanyi','sgyy');
INSERT INTO tb_keyword VALUES('k002','三国志','sanguozhi','sgz');
INSERT INTO tb_keyword VALUES('k003','三国杀','sanguosha','sgs');
INSERT INTO tb_keyword VALUES('k004','三毛流浪记','sanmaoliulangji','smllj');
INSERT INTO tb_keyword VALUES('k005','宫心计','gongxinji','gxj');
INSERT INTO tb_keyword VALUES('k006','西游记','xiyouji','xyj');
INSERT INTO tb_keyword VALUES('k007','宫锁心玉','gongsuoxinyu','gsxy');