AJAX技术
Ajax技术的概述
1.ajax的技术：Asynchronous JavaScript and XML 异步 js and XML
2.ajax技术可以在客户端与服务器进行数据的交互。
* 使用的异步进行数据交互
* 异步：先发送一个请求，但是不用等服务器端做出响应，就可以再发送一次请求。
* 传统方式同步数据交互
* 同步：先发送一个请求，用户需要等待，服务器做出响应。再发送一次请求。
3.使用js完成局部的刷新
* 可以使用ajax技术配合js的技术可以完成的局部刷新。
4.ajax可以和服务器进行数据的交互
* 传输纯文本 text
* 传输XML数据 在js端一解析
* 传输json数据 js端使用的一种js
5.应用的场景
* 百度搜索。
* 校验用户是否已经存在。
* 省市联动
6.ajax的优缺点
* 优点
* 用户体验非常好。
* 传输的数据比较小的。减轻服务器端压力。
* 缺点：
* 不能应用所有的场景下。
* 异步访问服务器端的次数明显增多。对服务器造成了压力。
* 使用XMLHttpRequest对象（浏览器对它的支持不是很好，浏览器有之间差异）
* var xhr = new XMLHttpRequest();
* 浏览器的差异
Ajax开发步骤（固定）
0.知道XMLHttpRequest对象，异步对象。使用该对象来完成异步发送请求和接收响应的操作。
1.第一步：先获取XMLHttpRequest对象
* 大多数浏览器 var xhr = new XMLHttpRequest();
* IE6浏览器： var xhr = new ActiveXObject("Msxml2.XMLHTTP");
* IE5.5及其一下版本 var xhr = new ActiveXObject("Microsoft.XMLHTTP");
function createXMLHttpRequest(){
try{
// 获取大多数（IE高版本、火狐、谷歌）
return new XMLHttpRequest();
}catch(e){
try{
// IE6
return new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
// IE5.5
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alert("大哥！您到底用的什么浏览器啊？是您自己开发的吗？");
throw e;
}
}
}
}
2.第二步：和服务器进行链接
* xhr.open();
* open("GET","/day23/xxx",true)方法有一些参数
* 1）请求的方式（常用的GET和POST）
* 2）请求资源的路径
* 3）是否是异步请求还是同步请求，如果值是true，异步的请求。反之。
* xhr.open("GET","/day23/xxx",true);
3.第三步：发送请求的数据
* xhr.send();
* send()方法的参数：代表请求体的内容。
* 如果现在GET请求，send(null)，因为火狐浏览器的版本有不同，有可能接收不到你发的请求。
* 如果是POST请求，send("username=zhangsan&password=123")
4.接收服务器端做出的响应
* 事件onreadystatechange ，监听xhr对象的状态的变化。
xhr.onreadystatechage = function(){
// 判断对象的状态为4，状态码为200
if(xhr.readyState == 4 && xhr.status == 200){
// 获取响应的内容 做出操作
}
}
* xhr对象的状态的改变
* 0 刚创建完xhr的对象
* 1 刚链接服务器，但是没有发送
* 2 发送完请求，但是服务器没有做出响应
* 3 服务器端已经做出响应，但是还没有响应完成
* 4 服务器的响应已经完成。（使用4状态）
* xhr.readyState == 4 服务器已经响应完成了。
* 状态码（200 404 500 302 304）
* xhr.status == 200 一切ok
5.获取响应的数据
* 先看服务器给你发的什么数据。
* var text = xhr.responseText; -- 接收纯文本内容
* var doc = xhr.responseXML; -- 接收XML格式的字符串数据。返回是的Document对象。
Ajax基本入门案例
1.需求：页面上有一个按钮，点击该按钮，发送异步的请求，获取服务器的数据，动态的显示到标签的中间。
2.客户端
* 有个按钮 -- 触发事件 onclick事件
* 放
-- 使用innerHTML属性3.服务器端
* 接收请求
* 做出响应（输出字符串）
发送数据
1.GET方式可以发送数据
* 在GET方式发送数据，在地址栏上拼接数据。
2.POST正常的发送数据。
* 需要在open()方法请求方式修改"POST"
* 需要设置请求的头信息 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
* 发送send() 指定想要发送的数据
验证用户名是否已存在
1.需求：判断用户是否已经存在。
2.分析：
* 客户端
* 表单，表单上有输入用户名
* 服务器
* 接收数据，获取用户输入的用户名，查询数据库，如果用户已经存在了，给用户提示。
3.创建一个数据库
create database day23;
use day23;
create table t_user(
id int primary key auto_increment,
username varchar(20),
password varchar(20)
);
insert into t_user values (null,'aaa','aaa');
insert into t_user values (null,'bbb','bbb');
insert into t_user values (null,'eee','eee');
insert into t_user values (null,'ggg','ggg');
响应XML数据
1.在服务器端编写的也是一个字符串，格式和XML的格式是一样的。String xml = "zhangsan";
2.客户端
* 接收数据 var doc = xhr.responseXML; 返回的doc就是Document对象。
* 做什么操作。
3.服务器
* 如果之前响应是字符串（text/html;charset=UTF-8），如果响应的XML类型的字符串（text/xml;charset=UTF-8），
省市联动
1.需求：在我的页面上，提供两个下拉选择框，一个是显示省份，一个是显示省份下的城市。
* 显示省份的下拉框，只要是页面一加载完成把所有的省份的信息加载到该下拉框中。
* 选择不同的省份，根据省份的信息，把该省下所有的城市生成到另一个下拉框中。
2.分析
* 提供了页面，包含两个下拉框。提供事件onload事件（页面一加载完，获取所有的省份信息）
* 编写后台的ProvinceServlet程序，负责解析china.xml的文件，获取到所有的省份的信息，返回到页面上，把信息加载到第一个下拉选择框中。（采用字符串的方式 北京,天津,河北.... ）
* 选择其中的一个省份，发送一次请求，请求CityServlet，获取该省份下所有的城市，做出响应，获取到该省份所有的城市，添加到另外的一个选择框中。（数据的格式采用 xml ）
3.编写代码
* 提供china.xml的文件 导入dom4j的jar包
4.前台的页面
XStream把JavaBean转换成xml（字符串类型）
1.作用：把JavaBean转换XML的格式
2.第三方提供的jar包。导入jar包。
3.演示的作用
* XStream xs = new Xstream();
* String xmlStr = xs.toXML(JavaBean); -- 把JavaBean转换成字符串类型的XML数据
JSON数据交换格式
1.用来交互数据，一种交互数据的格式。XML也可以交换数据。
2.json有自己的数据的格式
* var person = {}； person称为一个对象。
* json对象中有属性名和属性的值。属性名必须使用双引号。不能使用单引号！！！！！。
* 值是这几种类型
* null
* 数值 数字类型
* 字符串 ""
* 数组 []来表示
* boolean类型 true和false
3.开源的jar包
* JSON-lib
* 把JavaBean转换成JSON字符串
* 导入jar包
4.JSONObject
* 就相当于java中的Map
* put方法，添加键值对，调用toString()方法把JSON格式的字符串
* JSONObject.fromObject(JavaBean) -- 把JavaBean对象转换成JSON格式的字符串
5.JSONArray
* 就相当于java中的List集合
* add(JavaBean)，把JavaBean转换JSON格式（数组格式 []）
网友评论