Ajax-Js实现
虽然现在较多使用jQuery实现的Ajax,但js实现的ajax我们仍然需要了解; XMLHttpRequest: 案例一:使用ajax技术发送get请求,并返回三种不同格式的数据: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="scripts/jquery-1.7.2.js" ></script> <script type="text/javascript"> $(function() { $("a").click(function() { var request = new XMLHttpRequest(); var method = "GET"; //获取url 分别指向三个不同的数据文件 var url = this.href; request.open(method,url); request.send(null); var $content = $(this).text(); //html数据响应 if($content=="Andy") { request.onreadystatechange = function() { if(request.readyState==4) { if(request.status==200 || request.status==304) { $("#details")[0].innerHTML=request.responseText; } } } } //xml数据响应 if($content=="Richard") { request.onreadystatechange = function() { if(request.readyState==4) { if(request.status==200 || request.status==304) { var result = request.responseXML; var name = result.getElementsByTagName("name")[0].firstChild.nodeValue; var website = result.getElementsByTagName("website")[0].firstChild.nodeValue; var email = result.getElementsByTagName("email")[0].firstChild.nodeValue; alert(name); alert(website); alert(email); } } } } //json数据响应 if($content=="Jeremy") { request.onreadystatechange = function() { if(request.readyState==4) { if(request.status==200 || request.status==304) { var result = request.responseText; var object = eval("("+result+")"); var name = object.person.name; var age = object.person.age; var email = object.person.email; alert(name); alert(age); alert(email); } } } } return false; }); }); </script> </head> <body> <h1>People</h1> <ul> <li><a href="files/andy.html">Andy</a></li> <li><a href="files/richard.xml">Richard</a></li> <li><a href="files/jeremy.json">Jeremy</a></li> </ul> <div id="details"></div> </body> </html> 三个数据内容如下: html:<h2><a href="mailto:andy@clearlet.com">Andy Budd</a></h2> xml:<?xml version="1.0" encoding="UTF-8"?> json:{"person": <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> <script type="text/javascript" src="scripts/jquery-1.7.2.js" ></script> <script type="text/javascript"> $(function() { $("a").click(function() { //创建xmlHttpRequest var request = new XMLHttpRequest(); //准备发送请求的数据 :url 增加时间戳可以起到禁用缓存的目的 var url = this.href+"?time="+new Date(); var method = "POST"; //调用xmlHttpRequest对象的open方法 request.open(method,url); request.setRequestHeader("ContentType","application/x-www-form-urlencoded"); //调用xmlHttpRequest的send方法 request.send("name='cuigaochong'&age=1"); //为XMLHttpRequest对象添加onreadystatechange相应事件 request.onreadystatechange = function() { if(request.readyState == 4) { if(request.status==200||request.status==304) { alert(request.responseText); } } } return false; }); }); </script> </head> <body> <a href="helloAjax.txt">Hello Ajax</a> </body> </html> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |