AJAX初步接触

发布时间：2020-12-16 00:40:54 所属栏目：百科来源：网络整理

导读：AJAX，即 AsynchronousJavaScriptAndXML，是一种异步JavaScript和XML技术。 AJAX 的核心技术理念在于使用XMLHttpRequest对象发送异步请求。 AJAX用到的技术有： javascript: 实现客户端的数据发送和界面更新，是AJAX实现的编程语言; XMLHttpRequest ：浏览

AJAX，即AsynchronousJavaScriptAndXML，是一种异步JavaScript和XML技术。AJAX的核心技术理念在于使用XMLHttpRequest对象发送异步请求。

AJAX用到的技术有：

javascript:实现客户端的数据发送和界面更新，是AJAX实现的编程语言;

XMLHttpRequest：浏览器内置的用以进行异步数据发送和接收的对象，是AJAX核心对象;

Css+div:用户界面更加友好;

DOM模型：AJAX常见的技巧就是使用js响应dom组件事件或更新;

Xml:XML仅是一种传输数据的格式，在ajax应用中常以xml格式在c/s间交换数据;

Html:基础

使用AJAX三部曲：

首先，创建XMLHttpRequest对象；

其次，编写回调机制；

最后，发送请求。

下面我就用一个简单的示例来说明AJAX运行机制。

第一步，创建XMLHttpRequest对象

//定义request对象
var request;
//创建request对象
function createHttpRequest(){
	if(window.ActiveXObject){
		request=new ActiveXObject("Microsoft.XMLHTTP");}
	else if(window.XMLHttpRequest){
		request=new XMLHttpRequest();
		}
	else{
		alert("AJAX is not supported by your Browser!");}
}

第二步，绑定回调方法

//判定request是否创建成功并且浏览器处于OK的状态
//编写回调机制
//绑定
function processName(){
	if((request.readyState==4)&&(request.status==200)){
		alert("服务器返回的是："+request.responseText);
		document.getElementById("nameerror").innerHTML=request.responseText;
		}
}

第三步，发送请求

//发送异步请求
function checkName(){
	//创建request对象
	createHttpRequest();
	//回调机制
	request.onreadystatechange=processName;
	//向servlet发送request请求
	//第一个参数是发送请求方式   ：post与get
	//第二个参数是要发送到的servlet
	//第三个参数是判断是同步还是异步请求。若true，异步；若false，则同步
	request.open("POST","CheckNameServlet",true);
	request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	//传送参数
	var username=document.getElementById("username").value;
	request.send("username="+username);	
}

JSP界面

<body>
<div>
<form name="userinfoForm" action="CheckLoginUserinfo.action" method="post">
<table>
<tr>
<td>用户：<input type="text" name="username" id="username" onBlur="checkName();" /></td>
</tr>
<div id="nameerror" style="color:blue">
</div>
<tr>
<td>密码：<input type="password" name="pwd" id="pwd" size="20" /></td>
</tr>
<div id="pwderror" style="color:yellow">
</div>
<tr>
<td><input class="buttons" type="submit" value="注册" /></td>
<td>
<input class="buttons" type="reset" value="重置" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>

后台检测输入的用户名是否为netjva的代码

package cn.netjava.servlet;

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;

/**
 * Servlet implementation class CheckNameServlet
 */
public class CheckNameServlet extends HttpServlet {
       
	/**
	 * @see HttpServlet#doPost(HttpServletRequest request,HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
		response.setContentType("text/html;charset=gbk");
		PrintWriter out=response.getWriter();
		String username=request.getParameter("username");
		if(!username.equals("netjava")){
		out.println("用户名不正确！");	
		}
	}

}

当鼠标焦点离开用户名输入框时，就会调用checkName函数，当用户输入名不为netjava，在界面上输出显示用户名不正确。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!