Ajax
AJAX
asychronous javascript and xml
是一种用来改善用户体验的技术器,其本质是利用浏览器提供的一个特殊的对象 XMLHttpRequset 就是ajax 对象
向服务器发送异步请求,服务器返回部分数据(通常不需要返回完整页面)
浏览器利用这些数据对当前页面做部分更新整个过程 页面无刷新,不打断用户的操作
异步请求 发送请求的同事,浏览器不会销毁当前页面 用户仍然可以对当前页面做其他操作
如何获得ajax对象
兼容性
XMLHttpRequest 非IE
ActiveXObject IE
js 自己写:
1 function getXhr(){ 2 var xhr = null; 3 if(window.XMLHttpRequest){ 4 xhr = new XMLHttpRequest(); 5 }else{ 6 xhr = new ActiveXObject("Microsoft.XMLHttp"); 7 } 8 return xhr; 9 }
1、onreadystatechange 用来绑定一个事件处理函数
用来处理 readystatechange 事件
当ajax对象的readystate属性值发生了任何改变, 0到1 就会产生readystatechange事件
2、readyState
0,1,2,3,4
表示ajax对象与服务器通信的状态 当值为4时,表示ajax对象已经获得了服务器返回的所有的数据
3、responseText 获得服务器返回的文本数据
4、responseXML 获得服务器返回的XML数据
5、status 获得状态码
程步骤:
1、获得ajax对象
var xhr=getXhr();
2、发送请求
发送get请求
xhr.open('get','check_uname.do?uname=tom',true);
true : 表示 异步
false:表示 同步(发送请求时,浏览器会锁定当前页面,用户不能够对当前页面做其他操作 几乎不用了)
xhr.onreadystatechange=f1; xhr.send(null);
发送post请求
xhr.open('post','check_uname.do'true);
按照http协议规范,如果发送的post请求,在请求数据包里,要有content-type消息头
默认情况下ajax对象不带这个消息头,所有需要条用方法来设置这个消息头
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.send('name=tom&age=22');
3、编写服务器端的程序 Servlet
通常不需要返回完整的页面 只需要返回部分数据(文本)
4、编写js事件处理函数 2中的f1函数
1 function f1(){ 2 if(xhr.readyState == 4 && xhr.status == 200){ 3 var txt = xhr.responseText; 4 var xml = xhr.responseXML; 5 //利用这些数据更新页面 6 } 7 }
Ajax 缓存问题IE有(放弃吧)
IE 浏览器在发送get请求
解决方法加个随机数
xxx.do?123
(没意思)
编码问题
发送get请求
ie 会使用gbk进行编码
其他的浏览器 使用utf-8
service 默认使用iso-8859-1来解码
so 乱码
解决方法:
1、service 统一使用utf-8
<Connector URIEncoding="utf-8" connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443"/>
2、浏览器 使用encodeURI 函数来编码(js内置的函数)
xhr.open('get','check_uname.do?uname=tom',true);
变为:
var uri = 'check_uname.do?uname=tom' xhr.open('get',encodeURI(uri),true)
发送post请求
所有浏览器 都会使用utf-8来编码
service 还是使用iso-8859-1
so 乱码
解决方法:
request.setCharacterEncoding("utf-8")
JSON
JavaScript Object Notation
是一种轻量级的数据交换
数据交换:将要交换的护士节先转成一种与平台无关的数据格式,然后交给接受方来处理
{"name":"steve","age":22}
表示一个对象
{属性名:属性值,属性名:属性值}
属性名必须使用双引号
属性值得类型可以是string number true、false null object
属性值如果是string 必须使用双引号
表示一个 由对象组成的数组
[{},{}]
[{"code":"600180","name":"中国平安"},{"code":"510050","name":"上证50"}]
使用JSON
1、java 对象 转为 json字符串
1 package com.stevezong.json; 2 3 import java.util.ArrayList; 4 import java.util.List; 5 import bean.Stock; 6 import net.sf.json.JSONArray; 7 import net.sf.json.JSONObject; 8 9 public class JsonTest { 10 11 public static void test1() { 12 Stock s = new Stock(); 13 s.setCode("600180"); 14 s.setName("中国平安"); 15 s.setPrice(111); 16 JSONObject jsonObj = JSONObject.fromObject(s); 17 String jsonStr = jsonObj.toString(); 18 System.out.println(jsonStr); 19 } 20 21 // 多个对象组成的数组或者集合转换成json字符串 22 public static void test2() { 23 List<Stock> stocks = new ArrayList<Stock>(); 24 for (int i = 0; i < 3; i++) { 25 Stock s = new Stock(); 26 s.setCode("600180"); 27 s.setName("中国平安"); 28 s.setPrice(111); 29 stocks.add(s); 30 } 31 JSONArray arr = JSONArray.fromObject(stocks); 32 System.out.println(arr.toString()); 33 } 34 35 public static void main(String[] args) { 36 test1(); 37 test2(); 38 } 39 }
将json只负责转换成js对象
使用js内置的JSON对象提供的方法来转换
parse()方法
function f2(){ var str = '{"name":"tomcat","age":1000}' //使用js内置的JSON对象提供的方法来转换 var obj = JSON.parse(str); alert(obj.name); }
function f3(){ var str = '[{"name":"tomcat","age":1000},{"name":"tomcat1","age":2000},{"name":"tomcat2","age":3000}]' var obj=JSON.parse(str); alert(obj[1].name) }
Jquery 对ajax的支持
$.ajax({})
{}是一个用来描述请求选项参数的对象
1、url 请求地址
2、data 请求参数
两种格式:
1、请求字符串 username=root&password=123
2、对象 {"user":"root","password":"123"}
3、type 请求类型
get
post
4、dataType 服务器返回的数据的类型
1、text
2、json
3、html
4、xml
5、script
5、success 事件处理函数当服务器处理正常,用来处理服务器返回的数据
6、error 事件处理函数当服务器处理异常,用来处理服务器返回的数据
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!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>股票</title> <style type="text/css"> #d1 { width: 450px; height: 350px; background-color: black; margin-left: 300px; margin-top: 20px; } #d2 { height: 40px; background-color: red; color: yellow; } #tb { color: white; font-style: italic; font-size: 24px; } </style> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { //页面加载完成 setInterval(quoto, 5000); }); /* 该函数通过调用ajax 对象 向服务器发送异步请求,服务器放回一个描述股票信息的json字符串 通过解析json字符串 获得股票信息,然后更新表格 */ function quoto(){ //利用jQuery提供的方法来向服务器发送异步请求 $.ajax({ "url" : "gq.do", "type" : "post", "dataType" : "json", "success" : function(stocks) { //$.ajax 方法会自动将json 字符串转换成javascript对象 $("#tb1").empty(); for (i = 0; i < stocks.length; i++) { var s = stocks[i]; //更新表格 $("#tb1").append( '<tr><td>' + s.code + '</td><td>' + s.name + '</td><td>' + s.price + '</td></tr>'); } } }); } </script> </head> <body style="font-size: 30px;"> <div id="d1"> <div id="d2">股票行情</div> <div id="d3"> <table id="tb" width="100%"> <thead> <td>代码</td> <td>名称</td> <td>价格</td> </thead> <tbody id="tb1"> </tbody> <tfoot> </tfoot> </table> </div> </div> </body> </html>
load()
想服务器发送异步请求,然后将服务器返回的数据直接添加到符合要求的节点上
$obj.load(url,[data]);
url:请求地址.
data 请求参数
两种格式:
1、请求字符串 username=root&password=123
2、对象 {"user":"root","password":"123"}
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Insert title here</title> 8 <script type="text/javascript" src="js/jquery.js"></script> 9 <script type="text/javascript"> 10 $(function() { 11 $('#a1').click(showNumber); 12 }); 13 function showNumber() { 14 $("#d1").load("luck.do", 'size=3'); 15 } 16 </script> 17 18 </head> 19 <body> 20 <a id="a1">123</a> 21 <div id="d1"></div> 22 </body> 23 </html>