首页 > 代码库 > Ajax异步提交笔记
Ajax异步提交笔记
1,Ajax
AJAX = 异步 JavaScript 和 XML。 Asynchronous JavaScript and XML
XMLHttpRequest 对象 (异步的与服务器交换数据)
JavaScript/DOM (信息显示/交互)
CSS (给数据定义样式)
XML (作为转换数据的格式)
2,XMLHttpRequest
创建XMLHttpRequest的语法
IE5和IE6:
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
新版本IE和其他浏览器 IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
====>
var xmlhttp;
if (window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
} else {
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
3,XMLHttpRequest 常用的方法和属性
方法:
open() : 用于创建一个新的HTTP请求,并指定此请求的方法,URL,是否异步提交及验证信息
send() : 发送请求到服务器端
abort() : 取消当前请求
setRequestHeader() : 单独指定请求的某个HTTP头
getResponseHeader() : 从响应中获取指定的HTTP头
getAllResponseHeaders() : 获取响应的所有HTTP头
属性:
readyState : 返回请求的当前状态, readyState 常用值0表示未初始化,1表示初始化,2表示发送数据,3表示数据传送中,4表示数据接收完毕
status : 返回当前请求的HTTP状态码, status常用值200表示正确返回,404表示找不到访问对象
responseText : 以文本形式获取响应值
responseXML : 以xml形式获取响应值,并且解析成DOM对象返回
statusText : 返回当前请求的响应行状态
onreadystatechange : 设置回调函数
4,向服务器发送请求
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
open(method,url,async)
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
send(string)
string：仅用于 POST 请求 ,GET请求为空或null
GET 还是 POST？
以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
get 请求:
xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();
post 请求:
xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
5,AJAX - 服务器 响应
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。
1): responseText 属性
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
2): responseXML 属性
if (xmlhttp.readyState==4 && xmlhttp.status==200){ var xmlDoc=xmlhttp.responseXML; var txt=""; if(xmlDoc){ var x=xmlDoc.getElementsByTagName("ARTIST"); if (x.length > 0){ for (i=0;i<x.length;i++){ txt=txt + x[i].childNodes[0].nodeValue + "<br>"; } } } document.getElementById("myDiv").innerHTML=txt; }
XmlDocument 对象的常用属性
attributes : 当前节点的属性集合
childNodes : 当前节点的所有子节点
firstChild : 节点的第一个子节点
XmlDocument 对象的常用方法
getElementsByTagName() : 用来获取指定节点名的节点对象集合,参数为节点名称字符串
selectSingleNode() : 用来获取符合条件的第一个节点对象
selectNodes() : 用来获取符合条件的节点对象集合
6,原生ajax
1 <script type="text/javascript"> 2 function ajax(){ 3 var username=document.getElementsByName("username")[0].value; 4 //发送Ajax请求 5 //1.创建XMLHttpRequest对象 6 var xmlHttpRequest=createXMLHttpRequest(); 7 //2.设置回调函数，用来返回数据 8 xmlHttpRequest.onreadystatechange=callBack; 9 //3.初始化xmlHttpRequest 10 xmlHttpRequest.open("GET","UserServlet?username="+username,true); 11 //4.发送请求 12 xmlHttpRequest.send(null); 13 //回调函数 14 function callBack(){ 15 var data=xmlHttpRequest.responseText; 16 var sp=document.getElementById("sp"); 17 if(data=="true"){ 18 sp.innerHTML="用户名可用"; 19 }else{ 20 sp.innerHTML="该用户已存在"; 21 } 22 } 23 } 24 function createXMLHttpRequest(){ 25 //1.判断浏览器类型是否是IE6以上或者其他浏览器 26 if(window.XMLHttpRequest){ 27 return new XMLHttpRequest(); 28 }else{ 29 //如果为flase，则为IE6及以下 30 return new ActiveXObject(); 31 } 32 } 33 </script>
//接收方法
String username=request.getParameter("username");
System.out.println(username);
//实例化PrintWriter对象返回数据
PrintWriter out=response.getWriter();
if("admin".equals(username)){
out.print(false);
}else{
out.print(true);
}
7,jQuery简化Ajax使用
1 <script type="text/javascript"> 2 $(function(){ 3 $("#username").blur(function(){ 4 var username=document.getElementsByName("username")[0].value; 5 //发送Ajax 6 $.ajax({ 7 url:"UserServlet", 8 type:"GET", 9 data:"username="+username, 10 dataType:"text", 11 success:callBack 12 }); 13 function callBack(data){ 14 if(data=="true"){ 15 $("#sp").html("该用户名可用"); 16 }else{ 17 $("#sp").html("该用户名以被使用"); 18 } 19 } 20 }); 21 }); 22 </script>
8,简化
1 //第一个参数是url，第二个是发送的数据,第三个回调函数,最后一个是回调类型,数据的发送形式为get提交 2 $.get("UserServlet","username="+username+"&message="+message,callBack,"json"); 3 //发送请求的方式变成post提交 4 $.post("UserServlet",{username:username,message:message},callBack,"json"); 5 //当请求方式为get，回调json时候可以使用这种 6 $.getJSON("UserServlet",{username:username,message:message},callBack); 7 8 //fastJSON 9 String json=JSON.toJSONString(list,true); 10 System.out.println(json); 11 response.setContentType("text/html;charset=utf-8"); 12 PrintWriter out =response.getWriter(); 13 out.print(json); 14 out.flush();
9,提交form表单
<script type="text/javascript"> $(function(){ $("#btn").click(function(){ /* //将表单数据序列化 var form=$("#form").serializeArray(); //将表单数据转化为name=value的形式 var formString=$.param(form); */ var formString=$("#form").serialize(); $.post("UserServlet",formString,callBack,"JSON"); function callBack(data){ $("#div").append("<ul><li>用户名:"+data.username+"</li><li>密码:"+data.password+"</li><li>性别:" +data.gender+"</li><li>年龄:"+data.age+"</li><li>电话:"+data.phone+"</li><li>地址:" +data.address+"</li></ul>"); } }); }); </script> </head> <body> <form action="" id="form"> <span>用户名:</span><input type="text" name="username"><br> <span>密码:</span><input type="password" name="password"><br> <span>性别:</span><input type="radio" name="gender" value="男" checked="checked">男 <input type="radio" name="gender" value="女">女<br> <span>年龄:</span><input type="text" name="age"><br> <span>电话:</span><input type="text" name="phone"><br> <span>地址:</span><textarea rows="4" cols="50" name="address"></textarea><br> <input type="button" value="取值" id="btn"> </form> <div id="div"> </div> </body> User user=new User(username, password, gender, age, phone, address); //转化为json数据 String json=JSON.toJSONString(user); response.setContentType("text/html;charset=utf-8"); PrintWriter out=response.getWriter(); out.print(json); out.flush();
Ajax异步提交笔记