AJAX学习
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。AJAX代码运行在客户端，其和服务器进行交互完全依靠浏览器的XMLHttpRequest对象来完成。下面来看第一个AJAX程序。
AJAX是与服务器交互的，在无刷新的情况下完成数据校验或提交。所以第一个例子我们来完成这样一个功能：用户输入用户名，当失去焦点的时候页面提示该用户名是否已经存在（输入框所在的页面不刷新）。
创建数据库和插入数据的过程，这里就不再进行阐述，下面主要介绍一下servlet和JSP页面怎么写。
servlet代码如下：
package com.mxf.web.action; import java.io.IOException;
import java.io.PrintWriter; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import com.mxf.service.UserService;
import com.mxf.service.impl.UserServiceImpl; public class CheckUserNameServlet extends HttpServlet {
private static final long serialVersionUID = 1L; protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
/**
* 获得输出流，向页面输出数据
*/
PrintWriter pw = response.getWriter();
String userName = request.getParameter("userName");
UserService us = new UserServiceImpl();
boolean flag = us.checkUserName(userName);
if(flag){
pw.write("username is exits");
}else{
pw.write("username is not exits");
}
}
}
像用户客户端的页面标签数据是由容器通过流写出的这种知识点在这里不再进行阐述。这个servlet就是一个简单的用户名校验，可以注意到：它没有转发或者重定向的语句。
这一点很重要，如果有转发或重定向的语句，那么就不叫异步数据交互了。而是将数据通过流的方式响应到客户端。下面来看JSP页面：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/* 定义一个全局变量，用来存储XMLHttpRequest的值 */
var xhr ;
/* 创建XMLHttpRequest对象 */
function createXMLHttpRequest(){
xhr = new XMLHttpRequest();
}
function checkUserName(){
createXMLHttpRequest();
/* 获得用户输入的用户名 */
var userName = document.getElementById("userName").value;
/* url是XMLHttpRequest对象open函数内的一个参数，意思是：要往哪个服务器servlet发送请求。
它的内容和用表单提交数据时action内的值一样。
*/
var url = "CheckUserNameServlet.do?userName="+userName;
/*
XMLHttpRequest对象的open函数介绍：
open(String method, String url, any async, any username, any password)
method：使用哪种方式向服务器发送数据，有两个值：GET、POST；注意都是大写
url：上面已经介绍
async：是否使用异步操作，默认为：true，可以改为false
username和password：这两个参数不经常用到，目前不需要详细了解，他们的意思是向其他客户端发送数据。
一般open内填两个参数足矣：method、url
*/
xhr.open("GET", url);
/* XMLHttpRequest的onreadystatechange，从字面意思可以知道：当状态发生变化时，它记录了客户端的各个状态
该对象有5个状态，分别是：0，1，2，3，4
0：准备
1：获取
2：发送数据
3：等待
4：接收到客户端响应
xhr.onreadystatechange = callback;callback是回调函数，后面不要加括号（），
加了括号表示把该函数的返回值给xhr.onreadystatechange，不加括号就是执行该函数。
*/
xhr.onreadystatechange = callback;
xhr.send(null);
xhr.o
} function callback(){
/**
xhr.readyState:获取xhr的状态，上面有介绍（有5个状态）
xhr.status：获取从服务器返回的状态，200位正常
xhr.responseText：获取浏览器返回的信息
document.getElementById("msg").innerHTML=msg：将浏览器返回的数据加到页面
*/
if(xhr.readyState == 4){
if(xhr.status == 200){
var msg = xhr.responseText;
document.getElementById("msg").innerHTML=msg;
}
}
}
</script>
</head>
<body>
<span id="msg"></span>
<input type="text" name="userName"id="userName"/>
<input type="button" value="check" onclick="checkUserName()" />
</body>
</html>
这样就完成了异步交互的第一步，里面还有很多问题。
下面来解决一下ajax get提交的中文乱码问题。
ajax的中文乱码解决方式和表单提交数据时乱码原理基本一致，具体解决办法：
第一种：利用URLEncoder和URLDecoder来解决，都知道：tomcat在接收页面传输来的数据的时候采用的是"ISO-8859-1"的编码格式，如果传输的数据含有中文，解析的时候必定会产生乱码，所以我们可以将接收到的数据采用"ISO-8859-1"的编码方式再进行一次编码，然后再将其转化为"UTF-8"的编码方式，这样就不会再出现乱码，具体实现：
String userName = request.getParameter("userName");
userName = URLEncoder.encoder(userName,"ISO-8859-1");
userName = URLDecoder.decoder(userName,"UTF-8");
这样得到的userName就不会再乱码了。
第二种：userName = new String(userName.getBytes("ISO-8859-1"),"utf-8");
利用String的编码转换也可以解决乱码问题。
第三种：改动tomcat的默认编码格式，修改tomcat conf目录下的server.xml文件里的Connector节点中的编码，修改为：
<Connector port="8080" protocol="HTTP/1.1"
maxThreads="150" connectionTimeout="20000"
redirectPort="8443" URIEncoding="utf-8"/>
加入URLEncoding="utf-8"，就可以了。
ajax以post方式提交数据，JSP页面如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var xhr ;
function createXMLHttpRequest(){
xhr = new XMLHttpRequest();
}
function checkUserName(){
createXMLHttpRequest();
var userName = document.getElementById("userName").value;
var url = "CheckUserNameServlet.do";
xhr.open("POST", url);
xhr.onreadystatechange = callback;
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send("userName="+userName);
} function callback(){
if(xhr.readyState == 4){
if(xhr.status == 200){
var msg = xhr.responseText;
document.getElementById("msg").innerHTML=msg;
}
}
}
</script>
</head>
<body>
<!-- <form action="CheckUserNameServlet.do" method="post"> -->
<span id="msg"></span>
<input type="text" name="userName"id="userName"/>
<input type="button" value="check2" onclick="checkUserName()" />
<!-- <input type="submit" name="check"/> -->
<!-- </form> -->
</body>
</html>
对比一下get和post方式提交的JSP文件可以发现：
get提交：
xhr.open("GET", url);
xhr.send(null);
post提交：
xhr.open("POST", url);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send("userName="+userName);
post提交中的：xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');是必须的，如果使用post方式提交，则该行代码不可少。
post提交数据时的乱码和用表单post提交数据的处理方式一样：
request.setCharacterEncoding("utf-8");
该文中处理中文乱码的方式在不用ajax时同样适用。
AJAX学习的更多相关文章
- Ajax学习心得
Ajax学习心得 大致学了下Ajax,才知道它不是某种编程语言,而是一种在无需加载整个页面的情况下能够更新部分网页的技术.了解了它的功能后觉得这真是一种好的技术,这得给前端和运维省多少力啊! 传统的网 ...
- AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
- ajax学习之post请求步骤
ajax学习之post请求步骤 蚣汉御豁 讼护尧 娉郐皑 磲 力豪强的虎视眈眈相信过不了 觏随迦趾 怪了灵敏儿竟然不慌不忙的也没有来找她们 缸轰诎 ?ê戆冼 跄鲅胗绩 掳戈玉孑 馀模嗷婧 ...
- AJAX学习前奏----JS基础加强
AJAX学习前奏----JS基础加强 知识概要: 1.js类&属性&方法的定义 2.静态属性与方法 3.构造方法 4.原型的使用 5.Object对象直接加属性和方法 6.JSO ...
- AJAX学习必备三本书
<AJAX基础教程>AJAX必备图书之一.国内发行的第一本AJAX图书,也是目前最好的AJAX入门书,如果您是AJAX新手,此书是最好的入门图书.本书基本包括了实现Ajax需要了解的大部分 ...
- AJAX学习2
作者声明:本博客中所写的文章,都是博主自学过程的笔记,参考了很多的学习资料,学习资料和笔记会注明出处,所有的内容都以交流学习为主.有不正确的地方,欢迎批评指正. 本文学习内容:https://www. ...
- [学习笔记]AJAX学习
AJAX学习 ——在w3cschool学习AJAX的学习笔记 参考网站:w3cschool XMLHttpRequest 是 AJAX 的基础. XMLHttpRequest 对象 所有现代浏览器均支 ...
- AJAX学习小结
12345678910 $.ajax({ "url":"", //访问路径 "data":"", // 需要传输的数据 ...
- Ajax学习笔记demo
AJAX学习 AJAX简介: 全称:Asynchronous JavaScript and XML (JavaScript执行异步网络请求(JS和XML)),通过AJAX可以在浏览器向服务器发送异步请 ...
- Ajax学习重点总结
1.什么是AJAX AJAX=Asynchronous JavaScript and XML(异步的JavaScript和XML). AJAX是在不重新加载整个页面的情况下,后台与服务器交换数据并更新 ...
随机推荐
- [c#基础]AutoResetEvent
摘要 AutoResetEvent:msdn的描述是通知正在等待的线程已发生事件.此类不能被继承.也就是说它有那么一个时间点,会通知正在等待的线程可以做其它的事情了. AutoResetEvent 该 ...
- 【转】使用Eclipse构建Maven项目 (step-by-step)
安装eclipse 及配置maven时,参考的资料!!! from:http://blog.csdn.net/qjyong/article/details/9098213 Maven这个个项目管理和构 ...
- Spring Data JPA 的配置文件 已经数据库的状态
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- linux安装-版本选择-终极决定
选用64位或32位的版本,注意看硬件: 内存大于4G的用64位, 小于4G的用32位 同时, 64位的版本在软件源, 软件的兼容性等问题. ----------------------------- ...
- PHP实现各种经典算法
<? //-------------------- // 基本数据结构算法 //-------------------- //二分查找(数组里查找某个元素) function bin_s ...
- 到底instanceof是啥？
对Js有一定了解的盆友肯定都知道instanceof 并且还很常用,比如说用[1, 2, 3] instanceof Array 来判断是否是数组.所以我们可能会简单的以为他就是一个用来判断typeo ...
- Apache中，同一IP使用多域名对应多个网站的方法
首先dns中确定有相应的A记录, abc IN A 211.154.2.5 mail IN A 211.154.2.5 这个讲的是在windows下面配置apache虚拟主机: 一.配置虚拟 ...
- 处理dataTable的行和列数据
DataTable dt = null; foreach (DataRow dr in dt.Rows) { ; j < dr.ItemArray.Length; j++) { tempColu ...
- RNA测序样本检测
常规转录组测序 样品类型:去蛋白并进行DNase处理后的完整总RNA 样品需求量(单次): 植物和真菌样品:≥20 μg: 人.大鼠.小鼠样品:≥5 μg: 其他类型动物:≥10 μg: 原核 ...
- Spring mvc 报错：No qualifying bean of type [java.lang.String] found for dependency:
具体错误: No qualifying bean of type [java.lang.String] found for dependency: expected at least 1 bean w ...