AJAX初步接触

来源：互联网发布：sql查询学生成绩表编辑：程序博客网时间：2024/06/17 15:28

AJAX，即Asynchronous JavaScript And XML，是一种异步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，在界面上输出显示用户名不正确。

0 0