提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

神奇的Ajax

AJAX 神奇
2023-06-13 09:13:10 时间

目录

实现无刷新的用户登录

实现搜索自动提示

实现无刷新的用户登录

带你们看一下互联网的革命

为什么要使用Ajax?除去下面我所讲的，还有很多，看下面这张图，感兴趣的可以去搜索

无刷新：不刷新整个页面，只刷新局部

无刷新的好处:

      1、 只更新部分页面，有效利用带宽

      2、 提供连续的用户体验

      3、提供类似C/S的交互效果，操作更方面，自动补全功能

XMLHttpRequest：

avaScript对象XMLHttpRequest是整个Ajax技术的核心，它提供了异步发送请求的能力

方法名

说    明

open(method,URL,async)

建立与服务器的连接 method参数指定请求的HTTP方法,典型的值是GET或POST URL参数指定请求的地址 async参数指定是否使用异步请求，其值为true或false

send(content)

发送请求 content参数指定请求的参数

setRequestHeader(header,value)

设置请求的头信息

常用属性：

        onreadystatechange：指定回调函数

        readystate: XMLHttpRequest的状态信息  

就绪状态码

说    明

0

XMLHttpRequest对象没有完成初始化

1

XMLHttpRequest对象开始发送请求

2

XMLHttpRequest对象的请求发送完成

3

XMLHttpRequest对象开始读取响应，还没有结束

4

XMLHttpRequest对象读取响应结束

常用属性 status：HTTP的状态码

responseText：获得响应的文本内容

responseXML：获得响应的XML文档对象

状态码

说    明

200

服务器响应正常

400

无法找到请求的资源

403

没有访问权限

404

访问的资源不存在

500

服务器内部错误

使用Ajax验证用户名

实现无刷新用户名验证 当用户名文本框失去焦点时，发送请求到服务器，判断用户名是否存在 如果已经存在则提示：“用户名已被可用” 如果不存在则提示：“用户名可以可用”

使用文本框的onBlur事件

       1、 使用Ajax技术实现异步交互

        2、创建XMLHttpRequest对象

        3、通过 XMLHttpRequest对象设置请求信息

       4、 向服务器发送请求 创建回调函数，根据响应状态动态更新页面

验证姓名表单-checkname.jsp

使用JavaScript验证用户名- checkname.jsp

<form name="form1" action="" method="post">
	用户名
	<input type="text" id="uname" name="username" value=""
				onblur="checkUserExists()" />
	<div id="mess" style="display: inline"/>			
</form>
function checkUserExists() {
	var f = document.form1;
	var username = f.username.value;
	if (username == "") {
		alert("用户名不能为空");
		return false;
	} else {
		doAjax("CheckUserServlet?username=" + username);
	}
}

创建XMLHttpRequest对象

var xmlhttp;
function doAjax(url) {
	try {
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try {
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e) {
			try {
				xmhttp = new XMLHttpRequest();
				if (xmlhttp.overrideMimeType) {
					xmlhttp.overrideMimeType("text/xml");
				}
			} catch (e) {			}
		}
	}
}

使用Ajax进行处理-checkname.jsp

        1、创建XMLHttpRequest对象

        2、设置在服务器完成后要运行的回调函数

        3、设置请求信息

        4、发送请求

function processRequest() {
	var messdiv = document.getElementById(“mess”)；
	if (xmlhttp.readyState == 4)
		if (xmlhttp.status == 200) {
			//responseText表示请求完成后，返回的字符串信息				
            if (xmlhttp.responseText == "false")
				messdiv.innerHTML = "用户名可以使用"; 					
            else 
				messdiv.innerHTML = "用户名已被使用";				
        } else {
			alert("请求处理返回的数据有错误");				
		}
	}
}

使用Ajax实现登录:下面是一个示例

function doAjax(){
	createXMLHttpRequest();
	var name = document.getElementById("uname").value;
	var pwd = document.getElementById("upwd").value;
	if(XMLHttp!=null){
		var url ="LoginServlet?uname="+name+"&upwd="+pwd； 
		XMLHttp.open("POST",url,true);
		XMLHttp.setRequestHeader("Content-Type",
			"application/x-www-form-urlencoded;");
		XMLHttp.onreadystatechange=processRequest;
		XMLHttp.send(null);
	}else{
		alert("不能创建XMLHttpRequest对象实例")
	}
}

实现搜索自动提示

就像下面这张图一样。搜索框会出提示

 搜索提示的原理

        1、每输入完一个关键字时，向服务器发送一个请求

        2、服务器根据用户输入的关键字，从数据库中搜索相关关键字信息，并返回到客户端

        3、在客户端显示提示信息

注意事项

        当键盘的按键抬起时，触发onkeyup键盘事件

        将文本框的autocomplete属性设置为off，以免影响搜索提示

        当搜索提示出现后，需要将其中选中的搜索项突出显示，以便区分

下面是一个例子

public class SearchSuggest extends HttpServlet {
	public void doGet( …) {	
		…	
		String str = request.getParameter("search");
		List strList=new ArrayList();
		try{
			if(str!=null&str.length()>0){		
				…
				rs=stmt.executeQuery("select distinct(title) from 
					suggest where title like '"+str+"%' order by title");
				while(rs.next())
					strList.add(rs.getString("title"));									StringBuffer sbu=new StringBuffer();
				int size = strList.size();
				for(int i=0;i<size;i++)
					sbu.append((String)strList.get(i)+"-");
				out.print(sbu.toString());	
			}
		}catch(Exception e){	e.printStackTrace();	}
	}
}
function processReuqest(){
	if(xmlhttp.readyState==4){
	      if(xmlhttp.status==200){
			var sobj=document.getElementById("suggest");
			sobj.innerHTML="";
			var str= xmlhttp.responseText.split("-");
			var suggest="";
			if(str.length>0&&str[0].length>0){
				for(i=0;i<str.length;i++){
					suggest+="<div onmouseover='javascript:suggestOver(this);'";
					suggest+=" onmouseout='javascript:suggestOut(this);'";
					suggest+=" onclick='javascript:setSearch(this.innerHTML);'";
					suggest+=" class='suggest_link'>"+str[i]+"</div>";
				}
				sobj.innerHTML=suggest;
				document.getElementById("suggest").style.display="block";
			}else{
				document.getElementById("suggest").style.display="none";
			}
	      }
	}
}

以上就是今天的分享，多多点评！

相关文章