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是在不重新加载整个页面的情况下,后台与服务器交换数据并更新 ...
随机推荐
- aperm方法
本文原创,转载请注明出处,本人Q1273314690(交流学习) 感觉很多地方提到了aperm,但都没讲清楚,我自己参考了大家的资料,做了下总结,希望能够让对大家有所帮助. aperm方法 Tran ...
- 【解决】同一url的http请求所获取的结果总是相同
曾经在WP7写过一个通过HTTP获取网页内容的小程序,当时一直没能够解决: 有一个网址,在每次点击刷新之后页面所呈现的内容都是不同的.但是进行HTTP请求时,结果将会一直重复. 从网上查资料得知,在请 ...
- 一张图告诉你，只会jQuery还不够！
会了jquery语法,会了jquery函数,你就真的会了jquery吗,来看这张图!是超实用的jquery代码段一书的导览!熊孩子们,赶紧学习去吧! 对于码农来说,代码就是生产力,你每天能码多少行并不 ...
- hadoop之 mr输出到hbase
1.注意问题: 1.在开发过程中一定要导入hbase源码中的lib库否则出现如下错误 TableMapReducUtil 找不到什么-- 2.编码: import java.io.IOExceptio ...
- ajax访问 aspx.cs后台
--前台$.ajax({ type: "POST", contentType: "application/json", url: "WebForm2. ...
- 浮动层-JS兼容IE6
//引用jquery 包/*orderBycat 与 orderBycatHead 双层浮动*/ $(window).scroll(function () { var top = $(window). ...
- 部署Apache网站访问统计-AWStats分析系统
环境根据:http://www.cnblogs.com/zzzhfo/p/5925786.html 1.安装AWStats软件包 将软件包解压到httpd服务器中的/usr/lcoal/目录下 [ro ...
- VIM使用学习笔记 ： 按键说明
VIM有三种模式: 一般模式 上下左右移动光标,删除字符或删除整行,复制粘贴 编辑模式 i I i O a A r R 进入编辑模式 命令模式 在一般模式种输入 : / ?,可 ...
- JQuery实战图片特效-遁地龙卷风
(-1)写在前面 这个idea是我拷贝别人的,但代码是我自已一点点敲出来的,首先向这位前辈致敬,我用的是chrome49.firefox43.IE9,jquery3.0.言辞请结合代码,避免断章取意. ...
- Android本地数据存储之SQLite关系型数据库 ——SQLiteDatabase
数据库的创建,获取,执行sql语句: 框架搭建:dao 思考: 1.数据库保存在哪里? 2.如何创建数据库?如何创建表? 3.如何更新数据库?如何更改表的列数据? 4.如何获取数据库? 5.如何修改数 ...