Ajax

Posted 2020-08-31 李赞启

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax相关的知识，希望对你有一定的参考价值。

初步认识Ajax

1.创建XMLHttpRequest对象

var xmlHttpReques;
//创建xmlHttpReques对象
function createxmlHttpReques(){

		try{
	
			xmlHttpReques=new ActiveXObject("Msxml.XMLHTTP");//创建火狐浏览器的xmlHttpReques对象
		}
		catch (e) {
			try {
				xmlHttpReques=new ActiveXObject("Microso.XMLHTTP");//创建IE浏览器的xmlHttpReques对象
			}
			catch (e){
				try{
					xmlHttpReques=new XMLHttpRequest();//创建谷歌浏览器的xmlHttpReques对象
					if(xmlHttpReques.overrideMimeType){//判断xmlHttpReques对象是否创建成功
						xmlHttpReques.overrideMimeType("text\XML");	//设置xmlHttpReques对象的文本格式
					}
				}catch (e){
					alert("創建失敗");
				}
				
			}
			
		}
}

　　2.通过XMLHttpRequest对象设置请求信息

	function doAjax(){
		createxmlHttpReques();//創建xmlHttpReques對象
		var name=document.form1.Uname.value;
		name=name.replace(/(^\s+)|(\s+$)/g,"");
		xmlHttpReques.onreadystatechange=huidiao;//控件发生改变调用方法，是页面发生改变
		var url="yanzheng.jsp?name="+name;//获取到文本框中的value值并传到yanzheng.jsp页面进行验证看用户名是否存在
		xmlHttpReques.open("get", url,true);//打开服务器的链接设置提交模式为get提交的地址为url以及采用异步，为true时采用异步
		xmlHttpReques.send(null);//提交给服务器
		
	}

　　3.创建回调函数根据服务器的响应动态的改变页面

	function huidiao(){
	
		 if(xmlHttpReques.readyState==4){//判断xmlHttpReques执行的状态
		
				if(xmlHttpReques.status==200){//判断服务器是否正常执行
					var reult=xmlHttpReques.responseText;//获取yanzheng.jsp页面传回来的值
					reult=reult.replace(/(^\s+)|(\s+$)/g,"");//除去空格
					reult=reult.replace(/\t\n/g,"");//除去换行
					if(reult=="true"){//判断获取的值是否为true
						document.getElementById("name_test").innerhtml="可用";
					}else{

						document.getElementById("name_test").innerHTML="用户名已存在";
					}
				}
				else{

					document.getElementById("name_test").innerHTML=xmlHttpReques.status;
				}
		 }
		
	}

yanzheng.jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%@page import="com.user.dao.UserDao"%>
<%@page import="com.user.dao.impl.UserDaoImpl"%>
<%
request.setCharacterEncoding("utf-8");//设置request对象的编码格式
UserDao userDao=new UserDaoImpl();
String name=request.getParameter("name");//获取到通过doAjax方法传过来的name值var url="yanzheng.jsp?name="+name;
boolean flag=userDao.getUserByName(name);//根据name的值在数据库中进行查询如果存在返回true否则返回false
if(flag){
    out.print(false);//如果返回的是true由huidiao()函数中的var reult=xmlHttpReques.responseText;这一句接受响应的文本内容且值为false
}else
{
    out.print(true);//同样是输出响应的文本内容且值为true
}
/*
    解释一下当flag的值为true时说明数据库中存在此人根据注册的时用户名不能重复的规则所以在这了会向响应的文本内容传为false所以服务器的响应的文本值是false。
    当flag的值为flase时说明数据库中不存在这个用户名所以就可以进行顺利的注册，所以在这个时候响应的文本内容是为true所以服务器的响应的文本值是true
    在回调函数接收到响应的文本内容时就会根据响应的文本内容值进行判断，当为true时说明用户名是可用的也就是数据库中没有与此重复的用户名就可以继续注册，相反则无法注册
    在这里血药注意的就是在这里说出的文本响应的内容会有很多的空格以及换行，我们在回调函数中要进行处理。
*/
%>

Ajax常用的一些方法：

方法名	说明
open(method,URL,async)	建立与服务器的连接 method指定请求的Http方法典型的值有get和post URL指定请求的地址 async指定是否使用异步为true时使用异步
send（content）	发送请求 content指定请求的参数没有参数时设为null
setRequestHeader（header value）	设置请求的头信息

其中的onreadystatechange:是指回调函数

readystate是XMLHttpRequset的状态信息：

状态码	说明
0	XMLHttpRequset对象没有完成初始化
1	XMLHttpRequset对象开始发送请求
2	XMLHttpRequset对象的请求发送完成
3	XMLHttpRequset对象开始读取响应，但是还没有结束
4	XMLHttpRequset对象读取响应结束