柚子快報(bào)邀請(qǐng)碼778899分享：Ajax學(xué)習(xí)筆記

http://yzkb.51969.com/

學(xué)習(xí)視頻鏈接：B站 動(dòng)力節(jié)點(diǎn)

一、概述

ajax是用來做局部刷新的。局部刷新使用的核心對(duì)象是 異步對(duì)象（XMLHttpRequest） 這個(gè)異步對(duì)象是存在瀏覽器內(nèi)存中的 ，使用javascript語法創(chuàng)建和使用XMLHttpRequest對(duì)象。

全局刷新：整個(gè)瀏覽器被新的數(shù)據(jù)覆蓋。在網(wǎng)絡(luò)中傳輸大量的數(shù)據(jù)。 瀏覽器需要加載，渲染頁面。 局部刷新：在瀏覽器器的內(nèi)部，發(fā)起請(qǐng)求，獲取數(shù)據(jù)，改變頁面中的部分內(nèi)容。其余的頁面無需加載和渲染 網(wǎng)絡(luò)中數(shù)據(jù)傳輸量少， 給用戶的感受好。

AJAX：Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。

AJAX 是一種在無需重新加載整個(gè)網(wǎng)頁的情況下，能夠更新部分頁面內(nèi)容的新方法

Asynchronous: 異步的意思

JavaScript：javascript腳本，在瀏覽器中執(zhí)行

and : 和

xml : 是一種數(shù)據(jù)格式

ajax是一種做局部刷新的新方法，不是一種語言。 ajax包含的技術(shù)主要有javascript,dom,css, xml等等。 核心是javascript 和 xml 。 javascript：負(fù)責(zé)創(chuàng)建異步對(duì)象， 發(fā)送請(qǐng)求， 更新頁面的dom對(duì)象。 ajax請(qǐng)求需要服務(wù)器端的數(shù)據(jù)。 xml： 網(wǎng)絡(luò)中的傳輸?shù)臄?shù)據(jù)格式。 使用json替換了xml 。

AJAX 不單需要前端的技術(shù)，同時(shí)需要后端（服務(wù)器）的配合。服務(wù)器需要提供數(shù)據(jù)，數(shù)據(jù)是 AJAX 請(qǐng)求的響應(yīng)結(jié)果。

二、AJAX異步實(shí)現(xiàn)步驟

ajax中使用XMLHttpRequest對(duì)象。

1、創(chuàng)建異步對(duì)象

var xmlHttp = new XMLHttpRequest();

2、給異步對(duì)象綁定事件

當(dāng)請(qǐng)求被發(fā)送到服務(wù)器時(shí)，我們需要執(zhí)行一些基于響應(yīng)的任務(wù)。每當(dāng) readyState 改變時(shí)，就會(huì)觸發(fā) onreadystatechange 事件。此事件可以指定一個(gè)處理函數(shù) function。

onreadystatechange ：當(dāng)異步對(duì)象發(fā)起請(qǐng)求，獲取了數(shù)據(jù)都會(huì)觸發(fā)這個(gè)事件。這個(gè)事件需要指定一個(gè)函數(shù)， 在函數(shù)中處理狀態(tài)的變化。

通過判斷 XMLHttpReqeust 對(duì)象的狀態(tài)，獲取服務(wù)端返回的數(shù)據(jù)。

xmlHttp.onreadystatechange= function(){

處理請(qǐng)求的狀態(tài)變化。

if(xmlHttp.readyState == 4 && xmlHttp.status== 200 ){

//可以處理服務(wù)器端的數(shù)據(jù)，更新當(dāng)前頁面

var data = xmlHttp.responseText;

document.getElementById("name").value= data;

}

}

異步對(duì)象的屬性 readyState 表示異步對(duì)象請(qǐng)求的狀態(tài)變化 0：創(chuàng)建異步對(duì)象時(shí)， new XMLHttpRequest(); 1：初始異步請(qǐng)求對(duì)象， xmlHttp.open() 2：發(fā)送請(qǐng)求， xmlHttp.send() 3：從服務(wù)器端獲取了數(shù)據(jù)，此時(shí)3， 注意3是異步對(duì)象內(nèi)部使用， 獲取了原始的數(shù)據(jù)。 4：異步對(duì)象把接收的數(shù)據(jù)處理完成后。 此時(shí)開發(fā)人員在4的時(shí)候處理數(shù)據(jù)。 在4的時(shí)候，開發(fā)人員做什么 ？ 更新當(dāng)前頁面。

異步對(duì)象的status屬性，表示網(wǎng)絡(luò)請(qǐng)求的狀況的， 200， 404， 500， 需要是當(dāng)status==200 時(shí)，表示網(wǎng)絡(luò)請(qǐng)求是成功的。

3、初始化異步請(qǐng)求

異步的方法open()

xmlHttp.open(請(qǐng)求方式get|post, "服務(wù)器端的訪問地址", 同步|異步請(qǐng)求（默認(rèn)是true，異步請(qǐng)求）)

open(method,url,async)

參數(shù)說明：

? method：請(qǐng)求的類型；GET 或 POST

? url：服務(wù)器的 servlet 地址

? async：true（異步）或 false（同步）

例如：

xmlHttp.open("get", "login?name=admin&pwd=admin",true);

4、使用異步對(duì)象發(fā)送請(qǐng)求

xmlHttp.send()

5、接收服務(wù)器響應(yīng)的數(shù)據(jù)

需獲得來自服務(wù)器的響應(yīng)，使用 XMLHttpRequest 對(duì)象的 responseText 或responseXML 屬性。

responseText：獲得字符串形式的響應(yīng)數(shù)據(jù) responseXML：獲得 XML 形式的響應(yīng)數(shù)據(jù)

回調(diào)：當(dāng)請(qǐng)求的狀態(tài)變化時(shí)，異步對(duì)象會(huì)自動(dòng)調(diào)用onreadystatechange事件對(duì)應(yīng)的函數(shù)。

三、JSON

JSON(JavaScript Object Notation, JS 對(duì)象簡譜) 是一種輕量級(jí)的數(shù)據(jù)交換格式。

JSON分類：

json對(duì)象 JSONObject ,這種對(duì)象的格式名稱:值， 也可以看做是key:value格式。 json數(shù)組 JSONArray, 基本格式[{ name:"河北", jiancheng:"冀","shenghui":"石家莊"} , { name:"山西", jiancheng:"晉","shenghui":"太原"} ]

json的優(yōu)點(diǎn)：

1. json格式好理解

2. json格式數(shù)據(jù)在多種語言中，比較容易處理。 使用java、javascript讀寫json格式的數(shù)據(jù)比較容易。

3. json格式數(shù)據(jù)他占用的空間下，在網(wǎng)絡(luò)中傳輸快， 用戶的體驗(yàn)好。

處理json的工具庫：

gson（google）

fastjson（阿里，速度快，不是最符合json處理規(guī)范的）

jackson（性能好，規(guī)范好

json-lib（性能差，依賴多）

在js中的，可以把json格式的字符串，轉(zhuǎn)為json對(duì)象， json中的key，就是json對(duì)象的屬性名。

四、AJAX示例

根據(jù)省份id查詢省份信息

1、環(huán)境準(zhǔn)備

數(shù)據(jù)庫 db_test

省份信息表：

SET FOREIGN_KEY_CHECKS=0;

DROP TABLE IF EXISTS `province`;

CREATE TABLE `province` (

`id` INT(11) NOT NULL AUTO_INCREMENT,

`name` VARCHAR(255) DEFAULT NULL COMMENT '省份名稱',

`jiancheng` VARCHAR(255) DEFAULT NULL COMMENT '簡稱',

`shenghui` VARCHAR(255) DEFAULT NULL,

PRIMARY KEY (`id`)

) ENGINE=INNODB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8;

INSERT INTO `province` VALUES ('1', '河北', '冀', '石家莊');

INSERT INTO `province` VALUES ('2', '山西', '晉', '太原市');

INSERT INTO `province` VALUES ('3', '內(nèi)蒙古', '蒙', '呼和浩特市 ');

INSERT INTO `province` VALUES ('4', '遼寧', '遼', '沈陽');

INSERT INTO `province` VALUES ('5', '江蘇', '蘇', '南京');

INSERT INTO `province` VALUES ('6', '浙江', '浙', '杭州');

INSERT INTO `province` VALUES ('7', '安徽', '皖', '合肥');

INSERT INTO `province` VALUES ('8', '福建', '閩', '福州');

INSERT INTO `province` VALUES ('9', '江西', '贛', '南昌');

城市信息表：

SET FOREIGN_KEY_CHECKS=0;

DROP TABLE IF EXISTS `city`;

CREATE TABLE `city` (

`id` INT(11) NOT NULL AUTO_INCREMENT,

`name` VARCHAR(255) DEFAULT NULL,

`provinceid` INT(11) DEFAULT NULL,

PRIMARY KEY (`id`)

) ENGINE=INNODB AUTO_INCREMENT=17 DEFAULT CHARSET=utf8;

INSERT INTO `city` VALUES ('1', '石家莊市', '1');

INSERT INTO `city` VALUES ('2', '秦皇島', '1');

INSERT INTO `city` VALUES ('3', '保定市', '1');

INSERT INTO `city` VALUES ('4', '張家口', '1');

INSERT INTO `city` VALUES ('5', '南昌市', '9');

INSERT INTO `city` VALUES ('6', '九江市', '9');

INSERT INTO `city` VALUES ('7', '宜春市', '9');

INSERT INTO `city` VALUES ('8', '福州市', '8');

INSERT INTO `city` VALUES ('9', '廈門市', '8');

INSERT INTO `city` VALUES ('10', '泉州市', '8');

INSERT INTO `city` VALUES ('11', '龍巖市', '8');

INSERT INTO `city` VALUES ('12', '太原', '2');

INSERT INTO `city` VALUES ('13', '大同', '2');

INSERT INTO `city` VALUES ('14', '呼和浩特', '3');

INSERT INTO `city` VALUES ('15', '包頭', '3');

INSERT INTO `city` VALUES ('16', '呼倫貝爾', '3');

2、搭建環(huán)境

新建web application：ajaxweb 配置tomact服務(wù)器 Module添加Tomact支持 創(chuàng)建X表單和MLHttpRequest對(duì)象

創(chuàng)建XMLHttpRequest對(duì)象：

創(chuàng)建Servlet處理Ajax請(qǐng)求 package com.lskj.controller;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

import java.io.PrintWriter;

public class SearchServlet extends HttpServlet {

@Override

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

String provinceName = "無數(shù)據(jù)";

//獲取參數(shù)proid

String param = req.getParameter("proid");

if("1".equals(param)){

provinceName = "河北";

}

resp.setContentType("text/html;charset=utf-8");

PrintWriter pw = resp.getWriter();

pw.println(provinceName);

pw.flush();

pw.close();

}

@Override

protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

super.doGet(req, resp);

}

}

web.xml文件中注冊(cè)servlet

SearchServlet

com.lskj.controller.SearchServlet

SearchServlet

/s

運(yùn)行Tomact進(jìn)行測(cè)試 添加mysql驅(qū)動(dòng)

在WEB-INF目錄下創(chuàng)建lib文件，用來存放jar文件，把準(zhǔn)備好的mysql驅(qū)動(dòng)拷貝到lib目錄下。在項(xiàng)目結(jié)構(gòu)中modules->Dependencies->JARs or directories->項(xiàng)目WEB-INF\lib目錄，并選中剛添加的依賴確認(rèn)修改，也是在項(xiàng)目結(jié)構(gòu)下的Problems->點(diǎn)擊Fix->Add “l(fā)ib” to the artifact->OK 創(chuàng)建ProvinceDao訪問數(shù)據(jù)庫 //根據(jù)id獲取名稱

public String queryProviceNameById(Integer proviceId){

String url = "jdbc:mysql://localhost:3306/db_test";

String user = "root";

String pwd = "root";

Connection conn = null;

PreparedStatement ps = null;

ResultSet rs = null;

//方法返回值

String retName = "";

try{

//注冊(cè)驅(qū)動(dòng)

Class.forName("com.mysql.jdbc.Driver");

//獲取連接

conn = DriverManager.getConnection(url, user, pwd);

//獲取數(shù)據(jù)庫操作對(duì)象

String sql = "select name from province where id = ?";

ps = conn.prepareStatement(sql);

ps.setInt(1,proviceId);

//執(zhí)行SQL

rs = ps.executeQuery(sql);

//處理結(jié)果集

if (rs.next()) {

retName = rs.getString("name");

}

} catch(ClassNotFoundException e){

e.printStackTrace();

} catch(SQLException e){

e.printStackTrace();

}finally {

//釋放資源

try {

if (rs != null) {

rs.close();

}

} catch (SQLException e) {

e.printStackTrace();

}

try {

if (ps != null) {

ps.close();

}

} catch (SQLException e) {

e.printStackTrace();

}

try {

if (conn != null) {

conn.close();

}

} catch (SQLException e) {

e.printStackTrace();

}

}

return retName;

}

修改之前創(chuàng)建的Servlet @Override

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

String provinceName = "無數(shù)據(jù)";

//獲取參數(shù)proid

String param = req.getParameter("proid");

/*if("1".equals(param)){

provinceName = "河北";

}*/

if(param != null){

ProvinceDao dao = new ProvinceDao();

provinceName = dao.queryProviceNameById(Integer.parseInt(param));

}

resp.setContentType("text/html;charset=utf-8");

PrintWriter pw = resp.getWriter();

pw.println(provinceName);

pw.flush();

pw.close();

}

修改index.jsp中的js代碼 //綁定事件

xmlHttp.onreadystatechange = function () {

if (xmlHttp.readyState == 4 && xmlHttp.status == 200){

var data = xmlHttp.responseText;

//alert(data);

document.getElementById("proname").value = data;

}

}

部署項(xiàng)目，訪問測(cè)試

3、使用json作為數(shù)據(jù)交換格式

根據(jù)省份id，查詢省份的所有數(shù)據(jù)（數(shù)據(jù)格式為json）

實(shí)現(xiàn)步驟：

添加處理json的工具庫 jackson：是非常有名的處理 json 的工具庫。使用 jackson 可以實(shí)現(xiàn) java 對(duì)象到 json 格式字符串的轉(zhuǎn)換，也可以實(shí)現(xiàn) json 字符串轉(zhuǎn)為 json 對(duì)象。

把json的三個(gè)工具庫jar文件復(fù)制到/WEB-INF/lib目錄下確認(rèn)修改，在項(xiàng)目結(jié)構(gòu)下的Problems->點(diǎn)擊Fix->Add “l(fā)ib” to the artifact->OK 創(chuàng)建實(shí)體類Province package com.lskj.pojo;

public class Province {

private Integer id;

private String name;

private String jiancheng;

private String shenghui;

public Integer getId() {

return id;

}

public void setId(Integer id) {

this.id = id;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public String getJiancheng() {

return jiancheng;

}

public void setJiancheng(String jiancheng) {

this.jiancheng = jiancheng;

}

public String getShenghui() {

return shenghui;

}

public void setShenghui(String shenghui) {

this.shenghui = shenghui;

}

}

在ProvinceDao中增加方法，返回對(duì)象 //根據(jù)id獲取一個(gè)完整的Province對(duì)象

public Province queryProviceById(Integer proviceId){

String url = "jdbc:mysql://localhost:3306/db_test";

String user = "root";

String pwd = "root";

Connection conn = null;

PreparedStatement ps = null;

ResultSet rs = null;

//方法返回值

Province province = null;

try{

//注冊(cè)驅(qū)動(dòng)

Class.forName("com.mysql.jdbc.Driver");

//獲取連接

conn = DriverManager.getConnection(url, user, pwd);

//獲取數(shù)據(jù)庫操作對(duì)象

String sql = "select id,name,jiancheng,shenghui from province where id = ?";

ps = conn.prepareStatement(sql);

ps.setInt(1,proviceId);

//執(zhí)行SQL

rs = ps.executeQuery();

//處理結(jié)果集

if (rs.next()) {

province = new Province();

province.setId(rs.getInt("id"));

province.setName(rs.getString("name"));

province.setJiancheng(rs.getString("jiancheng"));

province.setShenghui(rs.getString("shenghui"));

}

} catch(ClassNotFoundException e){

e.printStackTrace();

} catch(SQLException e){

e.printStackTrace();

}finally {

//釋放資源

try {

if (rs != null) {

rs.close();

}

} catch (SQLException e) {

e.printStackTrace();

}

try {

if (ps != null) {

ps.close();

}

} catch (SQLException e) {

e.printStackTrace();

}

try {

if (conn != null) {

conn.close();

}

} catch (SQLException e) {

e.printStackTrace();

}

}

return province;

}

創(chuàng)建新的Servlet對(duì)象 public class SearchServletJson extends HttpServlet {

@Override

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

//默認(rèn)值，{}：表示json格式的數(shù)據(jù)

String json = "{}";

//獲取請(qǐng)求參數(shù)，省份id

String strProid = req.getParameter("proid");

//判斷proid有值時(shí)，調(diào)用dao查詢數(shù)據(jù)

if( strProid != null && strProid.trim().length() > 0 ){

ProvinceDao dao = new ProvinceDao();

Province p = dao.queryProviceById(Integer.valueOf(strProid));

//需要使用jackson 把 Provice對(duì)象轉(zhuǎn)為 json

ObjectMapper om = new ObjectMapper();

json = om.writeValueAsString(p);

}

//把獲取的數(shù)據(jù)，通過網(wǎng)絡(luò)傳給ajax中的異步對(duì)象，響應(yīng)結(jié)果數(shù)據(jù)

//指定服務(wù)器端（servlet）返回給瀏覽器的是json格式的數(shù)據(jù),json數(shù)據(jù)使用utf-8編碼的

//response.setContentType("text/json;charset=utf-8");

resp.setContentType("application/json;charset=utf-8");

PrintWriter pw = resp.getWriter();

pw.println(json); //輸出數(shù)據(jù)---會(huì)賦給ajax中 responseText屬性

pw.flush();

pw.close();

}

}

創(chuàng)建searchJson.jsp，獲取json數(shù)據(jù) 頁面：

ajax請(qǐng)求處理：

web.xml中注冊(cè)Servlet

SearchJson

com.lskj.controller.SearchServletJson

SearchJson

/json

部署應(yīng)用，測(cè)試訪問

柚子快報(bào)邀請(qǐng)碼778899分享：Ajax學(xué)習(xí)筆記

http://yzkb.51969.com/

參考文章