开发一定要看的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)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Spark【面试】

    首先map task会从本地文件系统读取数据,转换成key-value形式的键值对集合

    Java帮帮
  • jQuery的Ajax开发步骤

    一、jQuery的Ajax编程 ? 1.回顾传统Ajax开发步骤 ①:创建xmlHttpRequest对象 var xmlHttp = creatHttpReq...

    Java帮帮
  • JavaScript RegExp 常用的手机和邮箱正则

    在做前端form表单验证的时候,经常,也是必须对input做一下判断,例如邮箱了,手机了,input非空了,input只能输入数字了等等。

    Java帮帮
  • SAP UI5日期字段的显示逻辑和用法

    每一条Notes Item上面都可以绑定一个Date Formatter,对应的是Formatter.js文件下的notesDateFormatter方法:

    Jerry Wang
  • GitHub项目推荐 | christmAIs - 用文本生成(节日贺卡上的)抽象图案

    【christmAIs:用文本生成(节日贺卡上的)抽象图案】《Let AI design your holiday cards!》

    AI研习社
  • iOS表情键盘的完整实现

    最近在公司做了个表情键盘的需求,这个需求的技术难度不会很大,比较偏向业务。但是要把用户体验做的好也是不容易的,其中有几个点需要特别注意。话不多说,下面开始正文(...

    iOSSir
  • Phoenix的使用

    bin/sqlline.py数据库安装服务器ip或主机名:zookeeper的服务端口号

    黑白格
  • 新idea问题汇总

    一些原因,自己又重装了idea 打开后,配置界面变化很多 下面是出现的问题,不定时归纳一下:

    dodo_lihao
  • Python股市数据分析教程——学会它,或可以实现半“智能”炒股 (Part 1)

    摘要:本篇文章是"Python股市数据分析"两部曲中的第一部分,主要介绍金融数据分析的背景以及移动均线等方面的内容。 本篇文章是"Python股市数据分析"两部...

    小小科
  • SparkSQL的两种UDAF的讲解

    Spark的dataframe提供了通用的聚合方法,比如count(),countDistinct(),avg(),max(),min()等等。然而这些函数是针...

    Spark学习技巧

扫码关注云+社区

领取腾讯云代金券