本篇博客知识点
1.Ajax技术介绍
2.Ajax用GET、POST两种方式提交的主要代码
3.AJax技术封装成JS
Ajax技术介绍
全称: Asynchronized(异步) Javascript And Xml
技术组成: Javascript, DOM, CSS 和 XMLHttpRequest(ActiveObject)对象
xhr.readyState:
0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)
1 (初始化) 对象已建立,尚未调用send方法
2 (发送数据) send方法已调用,但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误,
4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
Ajax用GET、POST两种方式提交的主要代码
GET方式主要代码
<script type="text/javascript">
// 以下是GET方式的Ajax
function check1(obj){
var name = obj.value;
//1.创建一个Ajax对象
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveObjcet("Microsoft.XNLHttp");
}
//2.设置通讯方式和地址
var url = "<c:url value='/AjaxServlet?name="+name+"'/>";
xhr.open("GET", url, "true"); // true--表示异步,false---表示同步
//3.设置放回成功后的JS对象(回调函数)---就是校验后后台有个结果过来
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){ // 0--未初始化 1--初始化 2 发送数据 3数据发送中 4.数据发送完成
if(xhr.status ==200){ // 200说明没有挂
var txt = xhr.responseText; // 后台发来的结果
succ(txt);
}
}
};
//4.发送动作的触发
xhr.send(null);
}
</script>
POST方式主要代码
<script type="text/javascript">
//POST方式的Ajax
function check2(obj){
var pwd = obj.value;
//1创建一个ajax对象
var xhr=null;
if(window.XMLHttpRequest){//看看浏览器是否认识该对象---IE7之后,火狐,google等支持
xhr = new XMLHttpRequest();
}else{//IE6及以下,其它大部分旧版本的浏览器
xhr = new ActiveObject("Microsoft.XMLHttp");
}
//2 设置通讯方式和地址 //※※※
var url="<c:url value='/AjaxServlet'/>";
xhr.open("POST", url, true); //异步 ---并行
//xhr.open("POST", url, false); //同步 ---串行
//3 设置访问成功后的js对象(回调函数)
xhr.onreadystatechange = function(){
//alert(xhr.readyState);
if(xhr.readyState==4){
if(xhr.status==200){//正常应答
var txt = xhr.responseText;
//alert("后台返回的信息:"+txt);
succ2(txt);
}
}
};
//※※※※POST方式必须要设置Content-Type响应头※※※※※
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//4 发送(动作的触发)
xhr.send("pwd="+pwd); //※※※POST方式时,要向后台提交参数,写在该方法的参数中(前面的url后不带参数)
//alert("OK");
}
function succ2(obj){
div2.innerHTML = obj;
};
</script>
AJax技术封装成JS
/*
* var ajax = new Ajax();
* ajax.get();
*/
function Ajax(obj){
this.get= function(url,succ,fail){
//1.创建一个Ajax对象
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveObjcet("Microsoft.XNLHttp");
}
//2.设置通讯方式和地址
xhr.open("GET", url, "true"); // true--表示异步,false---表示同步
//3.设置放回成功后的JS对象(回调函数)---就是校验后后台有个结果过来
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){ // 0--未初始化 1--初始化 2 发送数据 3数据发送中 4.数据发送完成
if(xhr.status ==200){ // 200说明没有挂
var txt = xhr.responseText; // 后台发来的结果
succ(txt);
}else{
fail(xhr.status);
}
}
};
//4.发送动作的触发
xhr.send(null);
};
this.post = function(url,data,succ2,fail){
//1创建一个ajax对象
var xhr=null;
if(window.XMLHttpRequest){//看看浏览器是否认识该对象---IE7之后,火狐,google等支持
xhr = new XMLHttpRequest();
}else{//IE6及以下,其它大部分旧版本的浏览器
xhr = new ActiveObject("Microsoft.XMLHttp");
}
//2 设置通讯方式和地址 //※※※
xhr.open("POST", url, true); //异步 ---并行
//xhr.open("POST", url, false); //同步 ---串行
//3 设置访问成功后的js对象(回调函数)
xhr.onreadystatechange = function(){
//alert(xhr.readyState);
if(xhr.readyState==4){
if(xhr.status==200){//正常应答
var txt = xhr.responseText;
//alert("后台返回的信息:"+txt);
succ2(txt);
}else{
fail(xhr.status);
}
}
};
//※※※※POST方式必须要设置Content-Type响应头※※※※※
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//4 发送(动作的触发)
xhr.send(data); //※※※POST方式时,要向后台提交参数,写在该方法的参数中(前面的url后不带参数)
};
}
我练习的主要代码
调用有两个方式—未封装和封装过的,当时Servlet代码都是一样的
package cn.hncu.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class OneServlet extends HttpServlet {
private SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
System.out.println("get-ajax来了....");
String name = request.getParameter("name");
//int i = 10/0;
// try {
// Thread.sleep(3000);
// } catch (InterruptedException e) {
// e.printStackTrace();
// }
out.println(name+"你好,来访时间是:"+ sdf.format(new Date()));
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
System.out.println("post-ajax来了....");
String name = request.getParameter("name");
out.println(name+"你好,来访时间是:"+ sdf.format(new Date()));
}
}
未封装前的 调用
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax技术演示</title>
<script type="text/javascript">
//把name编辑框中的名字用get-ajax提交到后台进行校验,看看是否可用
function check1(obj){
var name = obj.value;
//1创建一个ajax对象
var xhr=null;
if(window.XMLHttpRequest){//看看浏览器是否认识该对象---IE7之后,火狐,google等支持
xhr = new XMLHttpRequest();
}else{//IE6及以下,其它大部分旧版本的浏览器
xhr = new ActiveObject("Microsoft.XMLHttp");
}
//2 设置通讯方式和地址
var url="<c:url value='/OneServlet?name="+name+"'/>";
xhr.open("GET", url, true); //异步 ---并行
//xhr.open("GET", url, false); //同步 ---串行
//3 设置访问成功后的js对象(回调函数)
xhr.onreadystatechange = function(){
//alert(xhr.readyState);
if(xhr.readyState==4){
if(xhr.status==200){//正常应答
var txt = xhr.responseText;
//alert("后台返回的信息:"+txt);
succ(txt);
}
}
};
//4 发送(动作的触发)
xhr.send(null); //GET方式时,参数为null。如果要向后台提交参数,则写在url地址中
//alert("OK");
}
function succ(txt){
div1.innerHTML=txt;
}
/*以下是POST方式ajax技术的代码*/
//把name编辑框中的名字用post-ajax提交到后台进行校验,看看是否可用
function check2(obj){
var name = obj.value;
//1创建一个ajax对象
var xhr=null;
if(window.XMLHttpRequest){//看看浏览器是否认识该对象---IE7之后,火狐,google等支持
xhr = new XMLHttpRequest();
}else{//IE6及以下,其它大部分旧版本的浏览器
xhr = new ActiveObject("Microsoft.XMLHttp");
}
//2 设置通讯方式和地址 //※※※
var url="<c:url value='/OneServlet'/>";
xhr.open("POST", url, true); //异步 ---并行
//xhr.open("POST", url, false); //同步 ---串行
//3 设置访问成功后的js对象(回调函数)
xhr.onreadystatechange = function(){
//alert(xhr.readyState);
if(xhr.readyState==4){
if(xhr.status==200){//正常应答
var txt = xhr.responseText;
//alert("后台返回的信息:"+txt);
succ2(txt);
}
}
};
//※※※※POST方式必须要设置Content-Type响应头※※※※※
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//4 发送(动作的触发)
xhr.send("name="+name); //※※※POST方式时,要向后台提交参数,写在该方法的参数中(前面的url后不带参数)
//alert("OK");
}
function succ2(txt){
div2.innerHTML=txt;
}
</script>
</head>
<body>
<form action="" method="post">
<h3>GET方式的ajax技术演示</h3> <br/>
Name:<input type="text" name="name" onblur="check1(this);"/>
<div id="div1"></div> <br/>
<h3>POST方式的ajax技术演示</h3> <br/>
Name:<input type="text" name="name" onblur="check2(this);"/>
<div id="div2"></div> <br/>
Pwd:<input type="text" name="pwd"/><br/>
Email:<input type="text" name="email"/><br/>
<input type="submit" value="注册"/>
</form>
<br/><br/>
<a href="jsps/ajax2.jsp">封装后的ajax技术演示</a>
</body>
</html>
下面是封装后的Ajax
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax技术演示</title>
<script type="text/javascript">
function Person(name,age){
this.name = name;
this.age = age;
this.show = function(){
alert(this.name+","+this.age);
};
this.setAge = function(age){
this.age = age;
};
}
function demo(){
var p = new Person("Jack",22);
p.show();
p.setAge(25);
p.show();
}
</script>
<script type="text/javascript" src="<c:url value='ajax.js'/>"></script>
<script type="text/javascript">
function check1(obj){
var name = obj.value;
var url="<c:url value='/OneServlet?name="+name+"'/>";
var ajax = new Ajax();
ajax.get(url, succ, failure);
}
function succ(txt){
div1.innerHTML=txt;
}
function failure(obj){
alert("服务器响应的错误信息代码:"+obj);
}
</script>
<script type="text/javascript">
function check2(obj){
var data = "name="+obj.value;
var url="<c:url value='/OneServlet'/>";
var ajax = new Ajax();
ajax.post(url,data, succ2, failure);
}
function succ2(txt){
div2.innerHTML=txt;
}
</script>
</head>
<body>
<h3>封装后的Ajax技术演示</h3>
<button onclick="demo();">函数封装技术复习</button>
<form action="" method="post">
<h3>GET方式的ajax技术演示</h3> <br/>
Name:<input type="text" name="name" onblur="check1(this);"/>
<div id="div1"></div> <br/>
<h3>POST方式的ajax技术演示</h3> <br/>
Name:<input type="text" name="name" onblur="check2(this);"/>
<div id="div2"></div> <br/>
Pwd:<input type="text" name="pwd"/><br/>
Email:<input type="text" name="email"/><br/>
<input type="submit" value="注册"/>
</form>
</body>
</html>