ajax简单介绍

Ajax

ajax介绍

AJAX : 异步 javascriptXML

AJAX :带来用户体验改变,是web优化一种主要手段

 

AJAX = DHTML (HTMLCSSJavaScript ) + XMLHttpRequest 对象

 

传统web交互模型,浏览器直接将请求发送给服务器,服务器回送响应,直接发给浏览器, Ajax交互模型,浏览器首先将请求 发送 Ajax引擎(以XMLHttpRequest为核心),AJax引擎再将请求发送给 服务器,服务器回送响应先发给Ajax引擎,再由引擎传给浏览器显示

 

1、同步交互模式,客户端提交请求,等待,在响应回到客户端前,客户端无法进行其他操作

2、异步交互模型,客户端将请求提交给Ajax引擎,客户端可以继续操作,由Ajax引擎来完成与服务武器端通信,当响应回来后,Ajax引擎会更新客户页面,在客户端提交请求后,用户可以继续操作,而无需等待 。

 

Google suggest建议、邮件定时保存、map地图

ajax快速入门

1.创建XMLHttpRequest对象

2.将状态触发器绑定到一个函数

3.使用open方法建立与服务器的连接

4.向服务器端发送数据

5.在回调函数中对返回数据进行处理

 

XMLHttpRequest

方法: open send

属性:

onreadystatechange :状态回调函数

responseText/responseXML :服务器的响应字符串

status:服务器返回的HTTP状态码

statusText:  服务器返回的HTTP状态信息  

readyState :对象状态

 

客户端向服务器提交数据

1get方式发送数据

xmlHttp.open("GET","url?key=value"); // 参数已经在url

xmlHttp.send(null);

2post方式发送数据

xmlHttp.open("POST","url"); // 不需要写参数

xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded"); // post发送参数前,需要设置编码格式

xmlHttp.send("name=xxx&pwd=xxx"); // 发送post数据

 

回调函数编写

if(xmlHttp.readyState == 4){

// 判断数据是否正确

if(xmlHttp.status == 200){

// 响应有效

...

}

}

 

 

针对Ajax 不同三种服务器响应数据类型,进行编程

1HTML片段的响应数据

将返回HTML片段 通过 innerHTML 属性,插入指定元素内部

ajax案例

1通过离焦发送Ajax请求,验证用户名是否存在

 

var xmlHttp = createXMLHttpRequest();

xmlHttp.onreadystatechange = function(){

    if(xmlHttp.readyState ==4 ){

if(xmlHttp.status == 200){

    ...

        }

    }

};

xmlHttp.open("GET","checkUsername?username="+username);

xmlHttp.send(null);

 

2通过链接 获得table数据

显示 --- 返回HTML片段

* 通过product.jsp 生成 HTML片段,返回客户端,客户端Ajax引擎接收,通过innerHTML tbale元素 嵌入到页面内部

Json介绍

返回JSON格式数据

去掉多余 HTML标签元素,只返回有效数据部分,是一种更优的方案

 

什么是json, 是一种javascript轻量级数据交互格式,主要应用于Ajax编程

 

格式一: {key:value,key:value,key:value } 键值对直接用 , 分开,键值之间用 :

本身必须是字符串常量

{name : '张三'}

{'name':'张三'}

 

是等价的

加不加引号,是有区别的,不加引号是变量,加引号常量字符串

 

格式二: [1, 2 ,3 ] 数组结构

 

组合后复杂格式

[{name:'aaa'}, {name:'bbb'}, {name:ccc}] 表示三个对象数组

 

JSON应用场景: AJAX请求参数 和响应数据  

json-lib使用

java类库 ,支持 javabean map list array 转换 json格式字符串, 支持将json字符串转换 javabean对象

 

导入jar包(6个)

 

1) 转换数组 、List集合 到json格式字符串  - 使用JSONArray

                String[] arr = {"sada","fdssd","dfsd","sadas"};

JSONArray jsonArray =  JSONArray.fromObject(arr);

System.out.println(jsonArray.toString());

 

2) 将JavaBean/Map解析成JSON串:-  使用JSONObject

Product p1 = new Product();

p1.setName("三星手机");

p1.setPrice(3999);

JSONObject jsonObject = JSONObject.fromObject(p1);

System.out.println(jsonObject);

 

3) 通过JsonConfig对象 配置对象哪些属性不参与转换

JsonConfig jsonConfig = new JsonConfig();

jsonConfig.setExcludes(new String[]{"price"});

JSONObject jsonObject = JSONObject.fromObject(p1, jsonConfig);

System.out.println(jsonObject);

 

重写练习二  返回结果数据是json格式数据

* 客户端获得json格式字符串后,转换为 javascript对象  ------- eval("("+jsonstr+")");

基于xml返回数据Ajax省市联动

XML结果数据生成

 

问题:服务器端如何将java对象,生成XML格式数据 ?  需要第三方类库支持 XStream

 

XStream is a simple library to serialize objects to XML and back again.

 

如果实现 对象 --- xml  只需要 xstream-1.3.1.jar

如果实现 xml ---- 对象 需要 xstream-1.3.1.jar xpp3_min-1.1.4c.jar

 

xstream-1.3.1.jar xpp3_min-1.1.4c.jar 复制工程lib 目录下

 

核心方法

xSteam.alias(name,Class); 将类型解析或者序列化 定义一个别名

toXML(obj) 将对象序列化XML

fromXML(inputStream/xml片段)  xml信息解析对象

 

提供便捷注解

@XStreamAlias(别名) 对类和变量设置别名

@XStreamAsAttribute  设置变量生成属性

@XStreamOmitField  设置变量 不生成到XML

@XStreamImplicit(itemFieldName = hobbies) 设置集合类型变量 别名

 

使注解生效

xStream.autodetectAnnotations(true);

 

使用 xmlHttp.responseXML 接收解析成为 document对象

你可能感兴趣的:(ajax)