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是在不重新加载整个页面的情况下,后台与服务器交换数据并更新 ...
随机推荐
- codeforces CF475 ABC 题解
Bayan 2015 Contest Warm Up http://codeforces.com/contest/475 A - Bayan Bus B - Strongly Connected Ci ...
- 导出Excel之Epplus使用教程1（基本介绍）
1.前言 目前Epplus的介绍中文资料很少,我也一直在摸索中使用它,以下是我在使用过程中得到的经验,写出来供大家参考.本系列共4章: 导出Excel之Epplus使用教程1(基本介绍) 导出Exce ...
- MFC CStatic类动态创建
如果我使用下面风格: m_PictureCtrl.Create(NULL, WS_EX_TRANSPARENT|WS_CHILD|WS_VISIBLE|WS_TABSTOP|SS_OWNERDRAW, ...
- lua 学习
尽管所有的脚本语言在特定领域都有自己的一席之地,但在游戏开发的世界里,Python 和 Lua 是非常适合的,因为它们可以直接调用C++的功能. lua最让人惊喜的地方应该是它的执行速度,目前没有任何 ...
- 网站SEO优化之Robots.txt文件写法。
作为网站开发者或网站管理员一定知道网站对搜索引擎的优化有多重要,好的网站不仅要有漂亮的界面,良好的用户体验,还要有较高的更新频率.要被百度.google这样的搜索引擎大量收录,才能增加网站展示量,访问 ...
- Codeforces #270 D. Design Tutorial: Inverse the Problem
http://codeforces.com/contest/472/problem/D D. Design Tutorial: Inverse the Problem time limit per t ...
- Go - 内置函数大全
Package builtin import "builtin" Overview Index Overview ▾ Package builtin provides docume ...
- 《深入浅出WPF》笔记一
1.项目模板 Visual Studio自动配置编译器参数,并准备好一套基本的源代码. 2.App.xaml/App.xaml.cs 声明程序的进程,并指定程序的主窗体. 3.Attribute和Pr ...
- java之google style
Google的Java编码规范英文版: http://google-styleguide.googlecode.com/svn/trunk/javaguide.html Google的Java编码规范 ...
- 循环执行n次的代码
var audio = document.createElement("audio"); var index = 0; audio.src = "piano/3C ...