AJAX技術
Ajax技術的概述
1.ajax的技術：Asynchronous JavaScript and XML? 異步 js and XML
2.ajax技術可以在客戶端與服務器進行數(shù)據(jù)的交互。
? ? * 使用的異步進行數(shù)據(jù)交互
? ? ? ? * 異步：先發(fā)送一個請求叶洞，但是不用等服務器端做出響應朦乏，就可以再發(fā)送一次請求蓖扑。
? ? * 傳統(tǒng)方式同步數(shù)據(jù)交互
? ? ? ? * 同步：先發(fā)送一個請求，用戶需要等待，服務器做出響應违帆。再發(fā)送一次請求。
3.使用js完成局部的刷新
? ? * 可以使用ajax技術配合js的技術可以完成的局部刷新金蜀。
4.ajax可以和服務器進行數(shù)據(jù)的交互
? ? * 傳輸純文本? ? text
? ? * 傳輸XML數(shù)據(jù)? ? ? 在js端一解析
? ? * 傳輸json數(shù)據(jù)? ? ? js端使用的一種js
5.應用的場景
? ? * 百度搜索前方。
? ? * 校驗用戶是否已經(jīng)存在。?
? ? * 省市聯(lián)動
6.ajax的優(yōu)缺點
? ? * 優(yōu)點
? ? ? ? * 用戶體驗非常好廉油。
? ? ? ? * 傳輸?shù)臄?shù)據(jù)比較小的惠险。減輕服務器端壓力。
? ? * 缺點：
? ? ? ? * 不能應用所有的場景下抒线。
? ? ? ? * 異步訪問服務器端的次數(shù)明顯增多班巩。對服務器造成了壓力。
? ? ? ? * 使用XMLHttpRequest對象（瀏覽器對它的支持不是很好嘶炭，瀏覽器有之間差異）
? ? ? ? * var xhr = new XMLHttpRequest();
? ? ? ? * 瀏覽器的差異
Ajax開發(fā)步驟（固定）
0.知道XMLHttpRequest對象抱慌，異步對象。使用該對象來完成異步發(fā)送請求和接收響應的操作眨猎。
1.第一步：先獲取XMLHttpRequest對象
? ? * 大多數(shù)瀏覽器? ? ? ? ? ? var xhr = new XMLHttpRequest();
? ? * IE6瀏覽器：? ? ? ? ? var xhr = new ActiveXObject("Msxml2.XMLHTTP");
? ? * IE5.5及其一下版本? ? ? var xhr = new ActiveXObject("Microsoft.XMLHTTP");
? ? function createXMLHttpRequest(){
? ? ? ? try{
? ? ? ? // 獲取大多數(shù)（IE高版本抑进、火狐、谷歌）
? ? ? ? return new XMLHttpRequest();
? ? ? ? }catch(e){
? ? ? ? ? ? try{
? ? ? ? ? ? ? ? // IE6
? ? ? ? ? ? ? ? return new ActiveXObject("Msxml2.XMLHTTP");
? ? ? ? ? ? }catch(e){
? ? ? ? ? ? ? ? try{
? ? ? ? ? ? ? ? ? ? // IE5.5
? ? ? ? ? ? ? ? ? ? return new ActiveXObject("Microsoft.XMLHTTP");
? ? ? ? ? ? ? ? }catch(e){
? ? ? ? ? ? ? ? ? ? alert("大哥睡陪！您到底用的什么瀏覽器八律？是您自己開發(fā)的嗎兰迫？");
? ? ? ? ? ? ? ? ? ? throw e;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? }
2.第二步：和服務器進行鏈接
? ? * xhr.open();
? ? * open("GET","/day23/xxx",true)方法有一些參數(shù)
? ? ? ? * 1）請求的方式（常用的GET和POST）
? ? ? ? * 2）請求資源的路徑
? ? ? ? * 3）是否是異步請求還是同步請求信殊，如果值是true，異步的請求汁果。反之涡拘。
? ? * xhr.open("GET","/day23/xxx",true);? ?
3.第三步：發(fā)送請求的數(shù)據(jù)
? ? * xhr.send();
? ? * send()方法的參數(shù)：代表請求體的內容。
? ? * 如果現(xiàn)在GET請求据德，send(null)鳄乏，因為火狐瀏覽器的版本有不同，有可能接收不到你發(fā)的請求棘利。?
? ? * 如果是POST請求橱野，send("username=zhangsan&password=123")
4.接收服務器端做出的響應
? ? * 事件onreadystatechange ，監(jiān)聽xhr對象的狀態(tài)的變化赡译。
? ? xhr.onreadystatechage = function(){
? ? ? ? // 判斷對象的狀態(tài)為4仲吏，狀態(tài)碼為200
? ? ? ? if(xhr.readyState == 4 && xhr.status == 200){
? ? ? ? ? ? // 獲取響應的內容 做出操作
? ? ? ? }
? ? }
? ? * xhr對象的狀態(tài)的改變
? ? ? ? * 0 剛創(chuàng)建完xhr的對象
? ? ? ? * 1 剛鏈接服務器，但是沒有發(fā)送
? ? ? ? * 2 發(fā)送完請求，但是服務器沒有做出響應
? ? ? ? * 3 服務器端已經(jīng)做出響應裹唆，但是還沒有響應完成
? ? ? ? * 4 服務器的響應已經(jīng)完成誓斥。（使用4狀態(tài)）
? ? * xhr.readyState == 4 服務器已經(jīng)響應完成了。? ? ?
? ? * 狀態(tài)碼（200 404 500 302 304）
? ? ? ? * xhr.status == 200? 一切ok
5.獲取響應的數(shù)據(jù)
? ? * 先看服務器給你發(fā)的什么數(shù)據(jù)许帐。
? ? * var text = xhr.responseText;? ? ? -- 接收純文本內容
? ? * var doc = xhr.responseXML;? ? ? ? ? ? -- 接收XML格式的字符串數(shù)據(jù)劳坑。返回是的Document對象。
Ajax基本入門案例
1.需求：頁面上有一個按鈕成畦，點擊該按鈕距芬，發(fā)送異步的請求，獲取服務器的數(shù)據(jù)循帐，動態(tài)的顯示到標簽的中間框仔。
2.客戶端
? ? * 有個按鈕? ? ? ? ? -- 觸發(fā)事件 onclick事件
? ? * 放
? ? -- 使用innerHTML屬性3.服務器端
? ? * 接收請求
? ? * 做出響應（輸出字符串）
發(fā)送數(shù)據(jù)
1.GET方式可以發(fā)送數(shù)據(jù)
? ? * 在GET方式發(fā)送數(shù)據(jù)，在地址欄上拼接數(shù)據(jù)拄养。
2.POST正常的發(fā)送數(shù)據(jù)离斩。
? ? * 需要在open()方法請求方式修改"POST"
? ? * 需要設置請求的頭信息? ? xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
? ? * 發(fā)送send()? 指定想要發(fā)送的數(shù)據(jù)
驗證用戶名是否已存在
1.需求：判斷用戶是否已經(jīng)存在。
2.分析：
? ? * 客戶端
? ? ? ? * 表單瘪匿，表單上有輸入用戶名
? ? * 服務器
? ? ? ? * 接收數(shù)據(jù)跛梗，獲取用戶輸入的用戶名，查詢數(shù)據(jù)庫棋弥，如果用戶已經(jīng)存在了核偿，給用戶提示。
3.創(chuàng)建一個數(shù)據(jù)庫
create database day23;
use day23;
create table t_user(
? ? id int primary key auto_increment,
? ? username varchar(20),
? ? password varchar(20)? ?
);
insert into t_user values (null,'aaa','aaa');
insert into t_user values (null,'bbb','bbb');
insert into t_user values (null,'eee','eee');
insert into t_user values (null,'ggg','ggg');
響應XML數(shù)據(jù)
1.在服務器端編寫的也是一個字符串顽染，格式和XML的格式是一樣的漾岳。String xml = "zhangsan";
2.客戶端
? ? * 接收數(shù)據(jù)? var doc = xhr.responseXML;? 返回的doc就是Document對象。
? ? * 做什么操作家乘。
3.服務器
? ? * 如果之前響應是字符串（text/html;charset=UTF-8）蝗羊，如果響應的XML類型的字符串（text/xml;charset=UTF-8），
省市聯(lián)動
1.需求：在我的頁面上仁锯，提供兩個下拉選擇框，一個是顯示省份翔悠，一個是顯示省份下的城市业崖。
? ? * 顯示省份的下拉框，只要是頁面一加載完成把所有的省份的信息加載到該下拉框中蓄愁。
? ? * 選擇不同的省份双炕，根據(jù)省份的信息，把該省下所有的城市生成到另一個下拉框中撮抓。
2.分析
? ? * 提供了頁面妇斤，包含兩個下拉框。提供事件onload事件（頁面一加載完，獲取所有的省份信息）
? ? * 編寫后臺的ProvinceServlet程序站超，負責解析china.xml的文件荸恕，獲取到所有的省份的信息，返回到頁面上死相，把信息加載到第一個下拉選擇框中融求。（采用字符串的方式? 北京,天津,河北....? ? ）
? ? * 選擇其中的一個省份，發(fā)送一次請求算撮，請求CityServlet生宛，獲取該省份下所有的城市，做出響應肮柜，獲取到該省份所有的城市陷舅，添加到另外的一個選擇框中。（數(shù)據(jù)的格式采用 xml ）
3.編寫代碼
? ? * 提供china.xml的文件? ? 導入dom4j的jar包
4.前臺的頁面
XStream把JavaBean轉換成xml（字符串類型）
1.作用：把JavaBean轉換XML的格式
2.第三方提供的jar包审洞。導入jar包莱睁。
3.演示的作用
? ? * XStream xs = new Xstream();
? ? * String xmlStr = xs.toXML(JavaBean);? ? ? -- 把JavaBean轉換成字符串類型的XML數(shù)據(jù)
JSON數(shù)據(jù)交換格式
1.用來交互數(shù)據(jù)，一種交互數(shù)據(jù)的格式预明。XML也可以交換數(shù)據(jù)缩赛。
2.json有自己的數(shù)據(jù)的格式
? ? * var person = {}；? person稱為一個對象撰糠。
? ? * json對象中有屬性名和屬性的值酥馍。屬性名必須使用雙引號。不能使用單引號Ｔ睦摇Ｖ继弧！Ｊ醴砚尽！。
? ? * 值是這幾種類型
? ? ? ? * null? ? ?
? ? ? ? * 數(shù)值? ? ? ? 數(shù)字類型
? ? ? ? * 字符串? ? ? ""
? ? ? ? * 數(shù)組? ? ? ? []來表示
? ? ? ? * boolean類型 true和false
3.開源的jar包
? ? * JSON-lib
? ? * 把JavaBean轉換成JSON字符串
? ? * 導入jar包
4.JSONObject
? ? * 就相當于java中的Map
? ? * put方法辉词，添加鍵值對必孤，調用toString()方法把JSON格式的字符串
? ? * JSONObject.fromObject(JavaBean)? -- 把JavaBean對象轉換成JSON格式的字符串
5.JSONArray
? ? * 就相當于java中的List集合
? ? * add(JavaBean)，把JavaBean轉換JSON格式（數(shù)組格式 []）
