Ajax
使用 jQuery 实现 Ajax.
-
-
load()
-
-
-
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(function() { $("a").click(function() { //使用load方法处理Ajax var url=this.url; var args={"time":new Date()}; //任何一个html 节点都可以使用load方法来加载Ajax,结果将直接插入到html 节点中 $("#content").load(url,args); return false; }); }); </script> </head> <body> <a href="helloAjax.txt">HelloAjax</a> <div id="content"></div> </body> </html>
-
-
. g e t ( ) ( 或 .get() (或 .get()(或.post())方法
-
-
测试 把xml中的index.html中的js代码用jQuery表示 效果不变
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Perple at Clearleft</title> <script type="text/javascript" src="../scripts/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(function() { $("a").click(function() { var url=this.href; var args={"time":new Date()}; //$.post(url,args,function(data){ 这就改为post格式 //url: //args: JSON格式 //function:回调函数 放响应结束时,回调函数被触发,响应结果在data中 $.get(url,args,function(data){ var name=$(data).find("name").text(); var email=$(data).find("email").text(); var website=$(data).find("website").text(); $("#details").empty() .append("<h2><a href='mailto:"+email+"'>"+name+"</a></h2>") .append("<a href='" + website + "'>" + website + "</a>"); }); return false; }); }); </script> </head> <body> <h1>People</h1> <ul> <li><a href="files/andy.xml">Andy</a></li> <li><a href="files/richard.xml">Richard</a></li> <li><a href="files/jeremy.xml">Jeremy</a></li> </ul> <div id="details"></div> </body> </html>
-
-
测试 把json中的index.html中的js代码用jQuery表示 效果不变
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="../scripts/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(function() { $("a").click(function() { var url=this.href; var args={"time":new Date()}; //url: //args: JSON格式 //function:回调函数 放响应结束时,回调函数被触发,响应结果在data中 $.getJSON(url,args,function(data){ var name=data.person.name; var email=data.person.email; var website=data.person.website; $("#details").empty() .append("<h2><a href='mailto:"+email+"'>"+name+"</a></h2>") .append("<a href='" + website + "'>" + website + "</a>"); }); return false; }); }); </script> </head> <body> <h1>People</h1> <ul> <li><a href="files/andy.js">Andy</a></li> <li><a href="files/richard.js">Richard</a></li> <li><a href="files/jeremy.js">Jeremy</a></li> </ul> <div id="details"></div> </body> </html>
-
-
-
总结
-
1.什么是Ajax? 不用刷新页面,但可以和服务器进行通信的方式
使用ajax的主要方式是XMLHttpRequest对象 -
2.使用XMLHttpRequest对象实现Ajax[了解]
-
3.Ajax传输数据的3种方式:
- ①:XML: 笨重,解析困难,但XML是通用的数据交换格式
- ②HTML : 不需要解析可以直接放到文档种。若仅更新一部分区域,但传输的数据不是很方便,且HTML代码需要拼装完成
- ③JSON: 小巧,有面向对象的特征,且有很多第三方的jar包可以把Java对象或集合转为JSON字符串
-
4.使用jQuery完成Ajax操作
-
①load方法 :可以用于HTML文档的元素节点,把结果直接加为对应节点的子元素。通常而言,load方法加载后的数据是一个HTML片段
var $obj=..
var url=...
var args={key:value,...};
$obj.load(url,args);
-
② . g e t , .get, .get,.post.$.getJSON:更加灵活。除去使用load方法的情况,大部分时候都使用这3个方法
-
Ⅰ 基本使用
//url: Ajax 请求的目标URL //args: 传递的参数: JSON类型 //data: Ajax 响应成功后的数据。可能是XML,HTML,JSON $.get(url,args,function(data){ })
-
Ⅱ 请求JSON数据
$.get(url,args,function(data){ },"JSON"); $.post(url,args,function(data){ },"JSON"); $.getJSON(url,args,function(data){ });
-
-
-