开发一定要看的Ajax编程

Ajax编程入门

1.web交互的2种模式对比

①:2种交互模式的流程

②:2种交互模式用户体验

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

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

2.Ajax快速入门

①:开发步骤

1).创建XMLHttpRequest对象

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

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

4).向服务器端发送数据

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

Demo:

<script type="text/javascript">

// 第一步 创建XMLHttpRequest

functioncreateXMLHttpRequest(){

try{

xmlHttp = newXMLHttpRequest();

}catch(tryMS) {

try{

xmlHttp = newActiveXObject("Msxml2.XMLHTTP");

}catch(otherMS) {

try{

xmlHttp = newActiveXObject("Microsoft.XMLHTTP");

}catch(failed) {

xmlHttp = null;

// 这里可以报一个错误,无法获得 XMLHttpRequest对象

}

}

}

returnxmlHttp;

}

varxmlHttp = createXMLHttpRequest();

// 第二步 响应从服务器返回后,Ajax引擎需要更新页面,绑定一个回调函数

xmlHttp.onreadystatechange = function(){

// 第五步,响应返回后执行

// 状态依次 是 0 - 4

// 0 未初始化 1 正在加载2 已经加载3 交互中4 响应完成

if(xmlHttp.readyState == 4){

// 判断数据是否正确

if(xmlHttp.status == 200){

// 响应有效

alert("响应返回了..." + xmlHttp.responseText);

}

}

};

// 第三步 建立与服务器连接

//xmlHttp.open("GET","helloworld?name=张三");//helloworld代表 Servlet URL

xmlHttp.open("POST","helloworld");

// 第四步 发送数据

// xmlHttp.send(null);

xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");

xmlHttp.send("name=李四");

</script>

②:XMLHttpRequest对象的属性及方法

属性:

1)onreadystateonchange:状态回调函数

2)readystate:对象状态

3)status:服务器返回的http状态码

4)reqsponseText/responseXML:服务器响应的字符串

5)statusText:服务器返回的http状态信息

方法:

1)open:

2)send:

③:客户端向服务器提交数据

1)get方式发送数据

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

xmlHttp.send(null);

2)post方式发送数据

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

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

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

④:Ajax编程图解

说明:查看时,请将文档放到为180%较为合适!

结合编程图解,我们将第一个案例的代码进行解剖:

3.三种不同服务器响应数据类型编程

常见的服务器响应数据类型:html片段、JSON格式数据、xml格式数据

①:HTML片段的数据处理

练习1:验证用户名是否有效

Ø 通过xmlhttp.responseText获得返回数据

Ø 通过Dom查找获得元素

Ø 调用元素的innerHTML进行操作

从Ajax编程图解我们可以知道,我们只需要分别编写客户端和服务器端就好。客户端我们以register.html文件为主,服务器端程度为CheckUsernameServlet以及配置文件web.xml。

下面分别对三个文件内容进行展示:

①:register.html

②:CheckUsernameServlet.java

③:web.xml

register.txt

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Untitled Document</title>

<script type="text/javascript">

// 用户名离焦 发起Ajax请求

window.onload = function(){

// 为 用户名绑定一个离焦事件

document.getElementById("username").onblur = function(){

// 获得用户名

var username = document.getElementById("username").value ;

if(username.trim().length != 0){

// Ajax发送数据

var xmlHttp = createXMLHttpRequest();

xmlHttp.onreadystatechange = function(){

if(xmlHttp.readyState ==4 ){

if(xmlHttp.status == 200){

// 使用innerHTML 将代码片段插入 指定位置

document.getElementById("info").innerHTML = xmlHttp.responseText;

}

}

};

xmlHttp.open("GET","/Ajax/CheckUsernameServlet?username="+username);

xmlHttp.send(null);

}else{

alert("用户名不能为空!");

}

}

}

String.prototype.trim = function(){

return this.replace(/(^\s*)(\s*$)/g, "");

}

function createXMLHttpRequest(){

try {

xmlHttp = new XMLHttpRequest();

}

catch (tryMS) {

try {

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

}

catch (otherMS) {

try {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

catch (failed) {

xmlHttp = null;

// 这里可以报一个错误,无法获得 XMLHttpRequest对象

}

}

}

return xmlHttp;

}

</script>

</head>

<body>

<form>

用户名: <input type="text" name="username" id="username"/><span id="info"></span><br/>

密&#12288码: <input type="password" name="password" id="password" /> <br/>

<input type="submit" value="注册" />

</form>

</body>

</html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>

<web-app version="2.5"

xmlns="http://java.sun.com/xml/ns/javaee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

<display-name></display-name>

<servlet>

<servlet-name>CheckUsernameServlet</servlet-name>

<servlet-class>ajax.CheckUsernameServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>CheckUsernameServlet</servlet-name>

<url-pattern>/CheckUsernameServlet</url-pattern>

</servlet-mapping>

<welcome-file-list>

<welcome-file>index.jsp</welcome-file>

</welcome-file-list>

</web-app>

说明:三个文件的具体内容请双击方框内的图标即可查看,这里推荐使用Notepad++进行关联

效果图展示:(数据使用list存储,abc和def存在)

注意:在register.html文件中,与服务器建立连接是,url一定要写对,否则返回数据时出现404错误!【"/Ajax/CheckUsernameServlet?username="】

②:JSON格式数据处理

练习2:通过链接获得table数据,显示 --- 返回HTML片段

通过product.jsp 生成HTML片段,返回客户端,客户端Ajax引擎接收,通过innerHTML 将table元素嵌入到页面内部,其思路与案例一类似,这里不做详细介绍。这里需要提出的是第二种解决方案JSON(HTML片段容易造成返回数据带回过多冗余的HTML标签元素)

JSON是一种JavaScript轻量级数据交互格式,主要应用于Ajax编程。易于人阅读和编写,同时也易于机器解析和生成。

格式一: {key:value,key:value,key:value } 键值对直接用 , 分开,键值之间用 : 键本身必须是字符串常量

{name : '张三'}

{'name':'张三'}

是等价的。

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

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

组合后复杂格式

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

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

问题: 服务器端如何生成 json格式数据------->>依赖第三方开源类库

③:JSON-lib的使用

是java类库 ,支持javabean map list array转换json格式字符串, 支持将json字符串转换javabean对象(反过来只支持这一种,使用很少)

在使用JSON-lib时必须导入至少5个jar包

开发时我们使用6个jar包,双击json-lib-all.zip即可获取所需j

1)将数组/list集合解析成JSON串

使用JSONArray可以解析Array类型

JSONArray jsonArray = JSONArray.fromObject(list变量);

2)将Javabean/Map解析成JSON串

使用JSONObject可以解析javabean类型

JSONObject jsonObject = JSONObject.fromObject(javabean);

3)对象属性过滤转换JSON串

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

JsonConfig jsonConfig = new JsonConfig();

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

重构练习2

table.txt

<!DOCTYPE html>

<html>

<head>

<title>table.html</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script type="text/javascript">

window.onload = function(){

document.getElementById("mylink").onclick = function(){

var xmlHttp = createXMLHttpRequest();

xmlHttp.onreadystatechange = function(){

if(xmlHttp.readyState==4){

if(xmlHttp.status==200){

// 返回json格式数据 ,需要对json格式数据处理

var productArr = eval("("+xmlHttp.responseText+")");

// 表格

var table = document.createElement("table");

table.setAttribute("border","1");

table.setAttribute("width","400");

var headTr = document.createElement("tr");

var th1 = document.createElement("th");

th1.innerHTML = "商品名称";

var th2 = document.createElement("th");

th2.innerHTML = "商品价格";

headTr.appendChild(th1);

headTr.appendChild(th2);

table.appendChild(headTr);

// 遍历结果 json对象

for(var i=0; i< productArr.length; i++){

var tr = document.createElement("tr");

var td1 = document.createElement("td");

td1.innerHTML = productArr[i].name;

var td2 = document.createElement("td");

td2.innerHTML = productArr[i].price;

tr.appendChild(td1);

tr.appendChild(td2);

table.appendChild(tr);

}

document.getElementById("result").innerHTML = "";

document.getElementById("result").appendChild(table);

}

}

}

xmlHttp.open("GET","/Ajax/listProducts");

xmlHttp.send(null);

}

}

String.prototype.trim = function(){

return this.replace(/(^\s*)(\s*$)/g, "");

}

function createXMLHttpRequest(){

try {

xmlHttp = new XMLHttpRequest();

}catch (tryMS) {

try {

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

}catch (otherMS) {

try {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}catch (failed) {

xmlHttp = null;

// 这里可以报一个错误,无法获得 XMLHttpRequest对象

}

}

}

return xmlHttp;

}

</script>

</head>

<body>

<a href="javascript:void(0);" id="mylink">显示商品信息</a>

<hr/>

<div id="result">还没有选择数据</div>

</body>

</html>

listProducts.java

package cn.itcast.jsonlib;

import java.io.IOException;

import java.util.ArrayList;

import java.util.List;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

public class listProducts extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

List<Product> products = new ArrayList<Product>();

Product p1 = new Product();

p1.setName("苹果手机");

p1.setPrice(4999);

Product p2 = new Product();

p2.setName("ThinkPad笔记本");

p2.setPrice(8888);

products.add(p1);

products.add(p2);

JSONArray jsonArray = JSONArray.fromObject(products);

response.setContentType("text/json;charset=utf-8");

response.getWriter().print(jsonArray);

System.err.println(jsonArray);

}

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

doGet(request, response);

}

}

运行效果:

④:XML格式数据处理

练习3:select完成省级联动

1) XStream的使用

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

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

XStream主要完成Java对象的序列化(xstream-1.3.1.jar)以及解析(xpp3_min-1.1.4c.jar)

2) XStream的核心方法

Ø xStream.toXML(obj):将对象序列化XML

Ø xStream.fromXML(inputStream/xml片段):将xml信息解析成对象

Ø xStream.alias(String name,Class):将类型解析或者序列化时,取一个别名

代码案例:(序列化)

解析xml时,要注意别名的命名规则要与序列化时保持一致!

3) XStream注解

在Javabean中进行注解

把某属性的名称取别名为city:@XStreamAlias(value="city")

注解生效:xStream.autodetectAnnotations(true);

@XStreamAsAttribute 设置变量生成属性

@XStreamOmitField 设置变量不生成到XML

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

原文发布于微信公众号 - Java帮帮(javahelp)

原文发表时间:2017-03-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏分布式系统进阶

Cluster版本中的Meta

1014
来自专栏Hadoop实操

如何开发HBase Endpoint类型的Coprocessor以及部署使用

2952
来自专栏Java3y

从零开始写项目第三篇【在线聊天和个人收藏夹】

在线聊天 在浏览网页的时候无意发现了弹幕这个玩意,于是我们简单去探究了一下弹幕其实是怎么产生的。 后来就接触到了“推送”这么一个概念,然后发现了goEasy这个...

42011
来自专栏SHERlocked93的前端小站

Vue源码阅读 - 依赖收集原理

vue已是目前国内前端web端三分天下之一,同时也作为本人主要技术栈之一,在日常使用中知其然也好奇着所以然,另外最近的社区涌现了一大票vue源码阅读类的文章,在...

2052
来自专栏python3

beautiful soup爬虫初识

官方推荐使用lxml作为解析器,因为效率更高. 在Python2.7.3之前的版本和Python3中3.2.2之前的版本,必须安装lxml或html5lib, ...

1304
来自专栏大内老A

ASP.NET Core应用针对静态文件请求的处理[3]: StaticFileMiddleware中间件如何处理针对文件请求

我们通过《以Web的形式发布静态文件》和《条件请求与区间请求》中的实例演示,以及上面针对条件请求和区间请求的介绍,从提供的功能和特性的角度对这个名为Static...

3225
来自专栏Golang语言社区

Golang语言为结构体排序

有很多的初学者可能对简单的数据的排序可以解决,一旦遇到复制结构的时候可能就束手无策了,今天给大家简单讲解下Go语言中结构体的排序。代...

42215
来自专栏Golang语言社区

GO语言高并发学习心得体会例

信号 sigRecv1:=make(chan os.Signal,1)sigs1:=[]os.Signal{syscall.SIGINT,syscall.SIG...

3355
来自专栏c#开发者

Asp.net Dynamic Data之四定义字段的显示/编辑模板和自定义验证逻辑

Asp.net Dynamic Data之四定义字段的显示/编辑模板和自定义验证逻辑 Asp.net Dynamic data提供了一些字段模板有比如在Det...

3555
来自专栏分布式系统进阶

Influxdb的Meta data分析

Influxdb定义了一个Service:Precreator Serivec(services/precreator/service.go),实现比较简单,周...

1222

扫码关注云+社区

领取腾讯云代金券