@H_502_4@@H_502_4@1、ajax@H_502_4@是什么@H_502_4@ @H_502_4@?@H_502_4@@H_502_4@
①@H_502_4@@H_502_4@ajax(asynchronouse javascript and xml) @H_502_4@异步的@H_502_4@javascript @H_502_4@和@H_502_4@ xml@H_502_4@
② @H_502_4@@H_502_4@@H_502_4@@H_502_4@7@H_502_4@种技术的综合@H_502_4@,@H_502_4@它包含了七个技术@H_502_4@( javascrip@H_502_4@t xml@H_502_4@ xstl xhtml dom@H_502_4@ xmlhttprequest@H_502_4@ css), @H_502_4@ajax @H_502_4@@H_502_4@是一个粘合剂@H_502_4@,@H_502_4@
③@H_502_4@@H_502_4@ajax@H_502_4@是一个与服务端语言无关的技术@H_502_4@. @H_502_4@即可以使用在@H_502_4@(PHP/java ee/.net@H_502_4@网站@H_502_4@/ asp)@H_502_4@
④@H_502_4@@H_502_4@@H_502_4@ajax@H_502_4@可以给客户端返回三种格式数据@H_502_4@(@H_502_4@文本格式@H_502_4@ @H_502_4@,@H_502_4@xml,json@H_502_4@格式@H_502_4@)@H_502_4@
⑤@H_502_4@@H_502_4@无刷新数据交换技术有以下@H_502_4@: flash,java applet,@H_502_4@框架@H_502_4@,iframe, @H_502_4@ajax)@H_502_4@
@H_502_4@@H_502_4@@H_502_4@2、ajax @H_502_4@的运行原理分析@H_502_4@
ajax更详细的原理图@H_502_4@
3、@H_502_4@使用@H_502_4@ajax@H_502_4@与服务器通信的的步骤@H_502_4@@H_502_4@
- @H_502_4@@H_502_4@@H_502_4@@H_502_4@@H_502_4@创建一个@H_502_4@XMLHttpRequest@H_502_4@对象@H_502_4@@H_502_4@
- 创建@H_502_4@url,data,@H_502_4@通过@H_502_4@ xmlHttpRequest.send()@H_502_4@
- 服务器端接收@H_502_4@ ajax@H_502_4@的请求@H_502_4@,@H_502_4@做相应处理@H_502_4@(@H_502_4@操作数据库@H_502_4@)@H_502_4@,然后返回结果@H_502_4@@H_502_4@@H_502_4@
- 客户端通过@H_502_4@xmlHttpRequest@H_502_4@@H_502_4@的属性@H_502_4@ reponseText,responseXML @H_502_4@取的数据,然后就完成局部刷新当前页面任务@H_502_4@
4、@H_502_4@使用ajax完成用户名是否存在验证@H_502_4@
@H_502_4@registerProcess.jsp
<%@ page contentType="text/html" pageEncoding="utf-8"%> <% String username = request.getParameter("username"); if("dahao".equals(username)){ //3号线 out.print("用户名不可用"); } else out.print("用户名可用"); %>register_get.html
使用get方式向服务器提交请求
<html> <head> <title>用户注册</title> <Meta http-equiv="content-type" content="text/html;charset=utf-8"> <script type="text/javascript"> //创建ajax引擎 function getXmlHttpObject(){ var xmlHttpRequest; if(window.ActiveXObject){ xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } else{ xmlHttpRequest = new XMLHttpRequest(); } return xmlHttpRequest; } function $(id) { return document.getElementById(id); } //验证用户名是否存在 var myXmlHttpRequest = ""; function checkUser() { myXmlHttpRequest = getXmlHttpObject(); //1号线 //判断是否创建成功 if (myXmlHttpRequest) { //通过myXmlHttpRequest对象发送请求到服务器的某个页面 //第一个参数表示请求的方式,“get”/“post” //第二个参数指定URL,对哪个页面发出ajax请求(本质仍然是http请求) //第三个参数true表示使用异步机制,false即不使用 var url = "/ajax/registerProcess.jsp?username=" + $("username").value; //打开请求 myXmlHttpRequest.open("get",url,true); //指定回调函数,process是函数名 myXmlHttpRequest.onreadystatechange = process; //发送请求,如果是get请求,填入null即可;如果是post请求,则填入实际的数据 myXmlHttpRequest.send(null); //2号线 } } //回调函数 function process() { //window.alert("函数被调用" + myXmlHttpRequest.readyState); if(myXmlHttpRequest.readyState == 4) { //4号线 //取出服务器返回的值 //window.alert("服务器返回:" + myXmlHttpRequest.responseText); $("myres").value = myXmlHttpRequest.responseText; } } </script> </head> <body> <form action="???" method="post"> 用户名字:<input type="text" onblur="checkUser();" name="username1" id="username"> <input style="border-width:0;color:red" type="text" id="myres"> <br/> 用户密码:<input type="password" name="password"><br> 电子邮件:<input type="text" name="email"><br/> <input type="submit" value="用户注册"> </form> <form action="???" method="post"> 用户名字:<input type="text" name="username2" > <br/> 用户密码:<input type="password" name="password"><br> 电子邮件:<input type="text" name="email"><br/> <input type="submit" value="用户注册"> </form> </body> </html>register_post.html
使用post方式向服务器提交请求
<html> <head> <title>用户注册</title> <Meta http-equiv="content-type" content="text/html;charset=utf-8"> <script type="text/javascript"> //创建ajax引擎 function getXmlHttpObject(){ var xmlHttpRequest; if(window.ActiveXObject){ xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } else{ xmlHttpRequest = new XMLHttpRequest(); } return xmlHttpRequest; } function $(id) { return document.getElementById(id); } //验证用户名是否存在 var myXmlHttpRequest = ""; function checkUser() { myXmlHttpRequest = getXmlHttpObject(); //1号线 //判断是否创建成功 if (myXmlHttpRequest) { //通过myXmlHttpRequest对象发送请求到服务器的某个页面 //第一个参数表示请求的方式,“get”/“post” //第二个参数指定URL,对哪个页面发出ajax请求(本质仍然是http请求) //第三个参数true表示使用异步机制,false即不使用 var url = "/ajax/registerProcess.jsp"; //这个是要发送的数据 var data = "username="+$("username").value; //打开请求 myXmlHttpRequest.open("post",true); //使用post方式发送时,这句话是必需的 myXmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //指定回调函数,如果是get请求,填入null即可;如果是post请求,则填入实际的数据 myXmlHttpRequest.send(data); //2号线 } } //回调函数 function process() { //window.alert("函数被调用" + myXmlHttpRequest.readyState); if(myXmlHttpRequest.readyState == 4) { //4号线 //取出服务器返回的值 //window.alert("服务器返回:" + myXmlHttpRequest.responseText); $("myres").value = myXmlHttpRequest.responseText; } } </script> </head> <body> <form action="???" method="post"> 用户名字:<input type="text" onblur="checkUser();" name="username1" id="username"> <input style="border-width:0;color:red" type="text" id="myres"> <br/> 用户密码:<input type="password" name="password"><br> 电子邮件:<input type="text" name="email"><br/> <input type="submit" value="用户注册"> </form> <form action="???" method="post"> 用户名字:<input type="text" name="username2" > <br/> 用户密码:<input type="password" name="password"><br> 电子邮件:<input type="text" name="email"><br/> <input type="submit" value="用户注册"> </form> </body> </html>运行结果如下: