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>

posted on 2018-10-10 10:18 浪漫的偷笑阅读(101) 评论(0) 编辑收藏举报