ajax学习笔记1
AJAX简单介绍： AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML），是指一种创建交互式网页应用的网页开发技术。通过 AJAX，JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象，您JavaScript 可在不重载页面的情况与 Web 服务器交换数据。 ajax准备工作：
前台ajax.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ajax</title>
<!--导入js，注意src的路径-->
<script type="text/javascript" src="jslib/jquery.js"></script>
<script type="text/javascript" src="jslib/verify.js"></script>
</head>
<body>
<!-- ajax不需要表单进行数据提交，因此不用写表单标签-->
<!-- ajax不需要name属性，需要一个id的属性-->
<!--onblur 事件会在对象失去焦点时发生-->
用户名:
<input type="text" id="username" onblur="verify3()" />
<div id="result"></div>
</br>
</br>
<input type="submit" value="登录"
</body>
</html>
后台AJAXServer.java： import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;
public class AJAXServer extends HttpServlet {
public void doGet(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out=response.getWriter();
//1.取参数
String old=request.getParameter("name");
//2.检查是否有问题
if(old==null||old.length()==0){
out.println("用户名不能为空");
}else{
//3.校验操作
String name=old;
if(name.equals("pan")){
//4.和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面端，而不是到新的页面
out.println("用户名["+name+"]已经存在");
}else{
out.println("用户名["+name+"]可以使用");
}
}
}
public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
this.doGet(request,response);
}
}
}
javascript：verify.js
//（1）用户名称的校验，采用jquery封装的ajax动态校验表单数据
function verify1(){
//1.获取文本框中的内容
//document.getElementById("username");
var jqueryObj= $("#username");
//获取节点的值
var userName=jqueryObj.val();
//2.将文本框中的数据发送给服务器的servlet
$.get("AJAXServer?name=" +username,null,callback);
}
function callback(data){
//3.接收服务器返回的数据
//4.把服务器端返回的数据动态的显示在页面上
//找到保存信息的节点
var resultObj=$("#result");
resultObj.html(data);
}
//验证方法2是把验证方式1写在了一个方法中，效果是一样的，都是采用jquery封装的ajax动态校验表单数据
function verify2(){
$.get("AJAXServer?name="+$("#username").val(),function(data){
$("#result").html(data);
});
}
//（2）用户名称的校验，使用XMLHTTPRequest对象来进行ajax的异步数据验证
var xmlhttp;//定义一个全局变量
function verify3(){
//1.采用dom的方式获取文本框中属性的值
var username=document.getElementById("username").value;
//2.创建XMLHttpRequest对象
//需要针对IE和其他类型的浏览器的差异建立这个对象的不同方式写不同的代码
if(window.XMLHttpRequest){
//针对FireFox，IE7，IE8，Safari，Opera，Mozillar
xmlhttp=new XMLHttpRequest();
//针对某些特定的版本的mozillar浏览器的BUG进行修正
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/html");
}
} else if(window.ActiveXObject){
//针对IE6，IE5.5，IE5
//两个用于可以创建XMLHttpRequest对象的控件名称，保存在一个js数组中，排在前面的版本较新
var activexName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i=0;i<activexName.length;i++){
// 取出一个控件名称进行创建，如果创建成功就终止循环
//如果创建失败，会抛出异常，然后可以继续循环，继续尝试创建
try{
xmlhttp=new ActiveXObject(activexName[i]);
break;
}catch(e){
}
}
}
if(!xmlhttp){
alert("XMLHttpRequest对象创建失败！！");
return;
}
//3.注册回调函数 注册回调函数时，只需要函数名，不要加括号
//我们需要将函数名注册，如果加上括号，就会把函数的返回值注册上，这个是错误的
xmlhttp.onreadystatechange=callback3;
//4.设置连接信息
xmlhttp.open("GET","AJAXServer?name="+username,true);
//5.发送数据，开始和服务器端进行交互
xmlhttp.send(null);
//GET方式url中封装了用户名，故发送只用发一个null
//POST方式请求和发送数据 <!-- xmlhttp.open("POST","AJAXServer",true); xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlhttp.send("name="+username); --> }
//回调函数
function callback3(){
//判断对象的状态是否交互完成
if(xmlhttp.readyState==4){
//判断http的交互是否成功
if(xmlhttp.status==200) {
//获取服务器端返回的数据
//第一种方式：获取服务器端输出的纯文本数据
var responseText=xmlhttp.responseText;
//将数据显示在页面上 通过dom的方式找到div标签对应的元素节点
var divNode=document.getElementById("result");
//设置元素节点中的html的内容
divNode.innerHTML=responseText;
}
}
}
}
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app 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"
version="2.5">
<servlet>
<servlet-name>AJAXServer</servlet-name>
<servlet-class>AJAXServer</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AJAXServer</servlet-name>
<url-pattern>/AJAXServer</url-pattern>
</servlet-mapping>
</web-app>
运行截图： 本程序用的是用IntelliJ IDEA 8.1.2软件编写的，访问的路径是http://localhost:8080/ajax.html 运用这个软件主要是这个对于写javascript脚本很方便，提示功能很强大，再者拓展一下见识，把上述代码复制到myeclipse中不用做任何的更改也可以正常的运行，只是要注意js脚本存放的路径和ajax.html中引入的脚本src的路径。 如果把程序放到myeclipse中执行可能需修改以下部分： 1.web.xml servlet的配置 2.AJAXServer.java 包名相关 截图1：
截图2：
截图3：
截图4：
截图说明:以上四个截图url显示的都是一样的，只是为了便于显示我没有把它截下来。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
