前后端數(shù)據(jù)交互(二)-原生 ajax 請(qǐng)求詳解

、ajax介紹

ajax 是前后端交互的重要手段或橋梁。它不是一個(gè)技術(shù)，是一組技術(shù)的組合。

ajax ：a：異步；j：js；a：和；x：服務(wù)端的數(shù)據(jù)。

ajax的組成：

異步的 js 事件
其他 js (處理解析數(shù)據(jù))
XMLHttpRequest 對(duì)象
數(shù)據(jù)(txt、json、xml、html)

通過后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，ajax可以使網(wǎng)頁實(shí)現(xiàn)異步更新。也就是在不需要重新加載整個(gè)網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)。傳統(tǒng)的網(wǎng)頁不使用ajax，如果需要更新內(nèi)容，必須重新加載整個(gè)頁面。

ajax請(qǐng)求原理：創(chuàng)建一個(gè)網(wǎng)絡(luò)請(qǐng)求對(duì)象 -> 發(fā)送連接請(qǐng)求 -> 發(fā)送請(qǐng)求數(shù)據(jù) -> 檢查網(wǎng)絡(luò)請(qǐng)求對(duì)象的狀態(tài) -> 如果響應(yīng)成功了 -> 瀏覽器接收返回?cái)?shù)據(jù)并更新網(wǎng)頁。接下來詳細(xì)介紹對(duì)象的創(chuàng)建以及它的方法。

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

XMLHttpRequest 對(duì)象，用于后臺(tái)與服務(wù)器之間的數(shù)據(jù)交換，意味著可以在不加載整個(gè)網(wǎng)頁的情況下，更新部分內(nèi)容或數(shù)據(jù)。現(xiàn)代瀏覽器基本都支持，但是低版本的IE不支持，如果我們考慮IE兼容問題創(chuàng)建對(duì)象的時(shí)候需要兼容創(chuàng)建。

考慮兼容時(shí)創(chuàng)建的對(duì)象：

var xhr ;
if( window.XMLHttpRequest ){ //檢查瀏覽器是否支持XMLHttpRequest
 xhr = new XMLHttpRequest()
}else{
 xhr = new ActiveXObject("Microsoft.XMLHTTP") //兼容IE6  IE5
}

三、XMLHttpRequest的方法

3.1、open( )

設(shè)置請(qǐng)求的類型、請(qǐng)求接口、是否異步處理。

使用語法：open( method , url , async )

method：設(shè)置網(wǎng)絡(luò)請(qǐng)求的類型，常用的 get 和 post
url：設(shè)置請(qǐng)求的接口也就是服務(wù)器的地址
async：true時(shí)表示異步，false表示同步

3.2、send( )

將請(qǐng)求發(fā)送到服務(wù)器。

使用語法：send( string )

string，只用在請(qǐng)求方式是post時(shí)，發(fā)送給服務(wù)器的數(shù)據(jù)。數(shù)據(jù)是鍵值對(duì)格式的，如："name=jack&pwd=1234"

使用發(fā)送方式不同的時(shí)候，傳輸數(shù)據(jù)添加方式也不同，所以我們介紹下分別為post和get時(shí)，數(shù)據(jù)是如何發(fā)送的？

3.3、提交方式

使用 get 方式提交

get發(fā)送請(qǐng)求時(shí)，需要傳給后臺(tái)的數(shù)據(jù)通過url來傳遞，多個(gè)參數(shù)之間使用 & 符號(hào)連接，使用時(shí)如下：

xhr.opn( "GET" , "1.php?name=hello&age=world" , true )
xhr.send()

使用 post 方式提交

使用 post 方式發(fā)送請(qǐng)求時(shí)，使用send來發(fā)送數(shù)據(jù)，有時(shí)需要設(shè)置數(shù)據(jù)格式，類似表單那樣，此時(shí)可通過 setRequestHeader 設(shè)置發(fā)送的數(shù)據(jù)格式

xhr.setRequestHeader( "Content-type", "application/x-www-form-urlencoded")

Content-type常見類型：

text/plain 純文本，基本不怎么用
application/x-www-form-urlcoded 鍵值對(duì)格式傳值，多個(gè)參數(shù)使用&連接
multipart/form-data 定界符，分隔各個(gè)數(shù)據(jù)，經(jīng)常用于上傳文件

四、readyState 屬性

readyState 存有 XMLHttpRequest 的狀態(tài)，它的值從 0-4 發(fā)生變化，分別代表的意義：

0：請(qǐng)求初始化，對(duì)象剛剛創(chuàng)建
1：服務(wù)器已連接
2：已發(fā)送，send發(fā)放已調(diào)用
3：已接收，此時(shí)只接收了響應(yīng)(response)頭部分
4：已接收，此時(shí)接收響應(yīng)(response)體信息

每當(dāng) readyState 狀態(tài)值發(fā)生改變時(shí)會(huì)，就會(huì)觸發(fā) onreadystatechange 事件，對(duì)應(yīng)著每個(gè)狀態(tài)值就會(huì)被觸發(fā)五次。當(dāng)狀態(tài)值為 4 時(shí)表示網(wǎng)絡(luò)請(qǐng)求響應(yīng)完畢，就可以獲取返回的值。

xhr.onreadystateChange = function(){
 if( xhr.readyState==4 ){
  if( xhr.status>=200 && xhr.status<300 || xhr.status==304 ){
   console.log("請(qǐng)求成功",xhr.responseXML)
  }else{
   console.log("請(qǐng)求失敗")
  }
 }
}

五、響應(yīng)信息

通常我們需要獲取服務(wù)器返回的信息，然后對(duì)我們的網(wǎng)頁做相對(duì)應(yīng)的結(jié)果展示，通常使用 XMLHttpRequest 的 responseText 或 responseXML 屬性。

responseText ---> 獲取到的是字符串形式。接收到可直接使用，無需轉(zhuǎn)換。

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXML ---> 獲取到 XML 形式的數(shù)據(jù)。使用時(shí)需要解析，如：

<person>
 <name>小米粒</name>
 <age>18</age> 
</person> 
解析時(shí)：
document.getElementsByTagName("name")[0]

responseXML 目前已被 json 取代，所以作為了解就好。

六、ajax實(shí)例

var xhr ;
if( window.XMLHttpRequest ){
 xhr = new XMLHttpRequest()
}else{
 xhr = new ActiveXObject("Microsoft.XMLHTTP") //兼容IE6  IE5
}
xhr.open('GET','1.txt',true)
xhr.send()
xhr.onreadystatechange = function(){
 if(xhr.readyState==4){
  if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
   console.log("請(qǐng)求成功",xhr.response) // 請(qǐng)求成功 abc
  }else{
   console.log("請(qǐng)求失敗")
  }
 }
}

1.txt 文檔內(nèi)容為 abc。所以返回的結(jié)果也是abc

hinkPHP6獲取參數(shù)的方法有多種，初學(xué)者可能知道其中的一種，然后在看到其他人代碼的時(shí)候又換了個(gè)寫法，可能會(huì)一臉懵逼，下面就給大家總結(jié)一下ThinkPHP6中獲取參數(shù)的方法。

假設(shè)我們有以下4種請(qǐng)求URL：

① http://localhost/index/index/user/id/1.html
② http://localhost/index/index/user?id=1
③ http://localhost/index/index/user?name=admin
④ http://localhost/index/index/user?name=111admin222

一、使用助手函數(shù)，這是最簡單直接的：

var_dump(input('id')); // ①、②鏈接都是1，③、④都是NULL

二、使用依賴注入

$this->request->param(); // 該方法返回所有的參數(shù)，返回值是一個(gè)數(shù)組
$this->request->param('id'); // 獲取指定參數(shù)的值
$this->request->get('id'); // 只對(duì)②鏈接生效，獲取id的值
$this->request->param('id', 1, 'intval'); // 接收參數(shù)id的值并轉(zhuǎn)成整型，結(jié)果為1

三、使用門面模式的靜態(tài)方法獲取

注意：使用該方法之前需要先引入：use think\facade\Request;

Request::param(); // 獲取當(dāng)前請(qǐng)求的所有變量
Request::param('name'); // 獲取請(qǐng)求的name值，返回字符串，如果沒有傳值，則返回null
Request::param(['name', 'email']); // 獲取多個(gè)參數(shù)值

其中，還有has方法可以檢測變量是否已經(jīng)設(shè)置，如：

Request::has('id', 'get');
Request::has('name', 'post'); // 檢測是否有POST方法傳遞的name值，有的話返回true，反之為false。

變量檢測可以支持所有支持的系統(tǒng)變量，包括get/post/put/request/cookie/server/session/env/file

以上三種方法是TP6獲取參數(shù)的歸納總結(jié)，在很多情況下，我們需要判斷當(dāng)前操作的請(qǐng)求類型是哪一種，如：GET、POST、PUT、DELETE或者是HEAD等等，同時(shí)不僅需要針對(duì)不同的請(qǐng)求類型做出相應(yīng)的邏輯處理，更要兼顧安全性的驗(yàn)證，過濾非法請(qǐng)求，TP6框架提供了請(qǐng)求對(duì)象Request類的多種方法來獲取、判斷當(dāng)前請(qǐng)求類型，例如，判斷一個(gè)請(qǐng)求是否為POST請(qǐng)求，我們可以這樣做：

if($request->isPost()) {
  // TODO
}

類似的情形還有$request->isGet()、$request->isPut()、$request->isAjax()等等，具體的方法如下圖：

請(qǐng)求對(duì)象Request類提供的方法

注意：method方法返回的請(qǐng)求類型始終是大寫的，并且這些方法都不需要傳入任何參數(shù)。

以上就是ThinkPHP6中獲取參數(shù)的三種方式，以及一些相關(guān)的請(qǐng)求類型，可能還不是很全，但是掌握這些基本能滿足大部分情形下的參數(shù)獲取，如果想了解更多相關(guān)內(nèi)容，請(qǐng)移步ThinkPHP官網(wǎng)查看相關(guān)文檔。

文分享自華為云社區(qū)《淺談Tomcat之Servlet-request獲取請(qǐng)求參數(shù)及常用方法-云社區(qū)-華為云》，作者：QGS。

//獲取Map集合中所有的key
Enumeration<String>   getParameterNames();
//獲取Map
Map<String, String[]>   getParameterMap(); 
//根據(jù)key獲取Map集合中的vale  (常用**)
String[]   getParameterValues(String s);
//獲取value一維數(shù)組的第一個(gè)元素   (常用**)
String    getParameter(String name); 
瀏覽器向服務(wù)器提交的是String類型

//getParameterNames()獲取所有key值
Enumeration<String> keys = request.getParameterNames();
while (keys.hasMoreElements()){
    String key = keys.nextElement();
    System.out.print("key: "+key +" ");
    //getParameterValues(key) 、據(jù)key獲取Map集合中的vale
    String[] Values = request.getParameterValues(key);
    if (Values.length>1){
        for (String value : Values) {
            System.out.print("value:"+value+" ");
        }
    }else {
        System.out.print(Values[0]);
    }
    System.out.println();
}

通過標(biāo)簽中的name獲取value一維數(shù)組

getParameterNames()獲取所有key值

如果html頁面的數(shù)據(jù)有更改，瀏覽器清除過緩存在執(zhí)行。

//通過標(biāo)簽中的name獲取value一維數(shù)組
String[] usernames = request.getParameterValues("username");
String[] pwds = request.getParameterValues("pwd");
String[] hobbies = request.getParameterValues("hobby");
for (String username : usernames) {
    System.out.print(username);
}
System.out.println();
for (String pwd : pwds) {
    System.out.print(pwd);
}
System.out.println();
for (String hobby : hobbies) {
    if (hobby.isEmpty()){
        System.out.println("null");
    }
    System.out.print(hobby);
}
System.out.println();

//獲取數(shù)組的第一個(gè)參數(shù)
String username = request.getParameter("username");
String pwd = request.getParameter("pwd");
String hobby = request.getParameter("hobby");

System.out.println("getParameter :"+username+" "+pwd+" "+hobby);

getParameter獲取數(shù)組的第一個(gè)參數(shù)

//獲取數(shù)組的第一個(gè)參數(shù)
String username = request.getParameter("username");
String pwd = request.getParameter("pwd");
String hobby = request.getParameter("hobby");

請(qǐng)求域?qū)ο?/h1>

Request又稱“請(qǐng)求域”
應(yīng)用域?qū)ο骃ervletContext(Servlet上下文對(duì)象)、
當(dāng)用戶的共享數(shù)據(jù)很少修改操作并且數(shù)據(jù)量少的時(shí)候，使用ServletContext能夠提升程序的執(zhí)行效率(應(yīng)用域綁定數(shù)據(jù)，看作將數(shù)據(jù)放到Cache當(dāng)中，用戶訪問時(shí)直接從Cache中提取，減少IO等操作)。
應(yīng)用域?qū)ο骃ervletContext的操作方法(類似Map集合的操作)
//向域綁定數(shù)據(jù)
setAttribute(String name , Object obj)
//從域獲取數(shù)據(jù),根據(jù)name(key)獲取數(shù)據(jù)
Object getAttribute(String name)
//移除數(shù)據(jù),根據(jù)name(key)
removeAttribute(String name)
請(qǐng)求域?qū)ο?請(qǐng)求域比應(yīng)用域的范圍小, 占用資源小，生命周期短，請(qǐng)求域?qū)ο笾辉谝淮握?qǐng)求內(nèi)有效。
請(qǐng)求域?qū)ο骃ervletContext的操作方法(類似Map集合的操作)
//向域綁定數(shù)據(jù)
setAttribute(String name , Object obj)
//從域獲取數(shù)據(jù),根據(jù)name(key)獲取數(shù)據(jù)
Object getAttribute(String name)
//移除數(shù)據(jù),根據(jù)name(key)
removeAttribute(String name)

案例

//獲取系統(tǒng)當(dāng)前時(shí)間

Date nowTime =new Date();

//向request域 中綁定數(shù)據(jù)

request.setAttribute("NowTime",nowTime);

//從request域 獲取數(shù)據(jù)

Object obj = request.getAttribute("NowTime");

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

response.setCharacterEncoding("utf-8");

PrintWriter out = response.getWriter();

SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd  HH:mm:ss");

String timeStr = sdf.format((Date)obj);

out.print("當(dāng)前時(shí)間: "+ timeStr);

Servlet轉(zhuǎn)發(fā)機(jī)制

轉(zhuǎn)發(fā)servlet類

public class ServletA extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //使用Servlet轉(zhuǎn)發(fā)機(jī)制。執(zhí)行ServletA后，跳轉(zhuǎn)至ServletB,調(diào)用請(qǐng)求轉(zhuǎn)發(fā)器,將request，response參數(shù)傳遞給另一個(gè)HttpServlet子類
        request.getRequestDispatcher("/servletB").forward(request,response);
    }
}

public class ServletB extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //獲取系統(tǒng)當(dāng)前時(shí)間
        Date nowTime =new Date();
        //向request域 中綁定數(shù)據(jù)
        request.setAttribute("NowTime",nowTime);
        //從request域 獲取數(shù)據(jù)
        Object obj = request.getAttribute("NowTime");
        response.setContentType("text/html;charset=utf-8");
        response.setCharacterEncoding("utf-8");
        PrintWriter out = response.getWriter();
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd  HH:mm:ss");
        String timeStr = sdf.format((Date)obj);
        out.print("當(dāng)前時(shí)間: "+ timeStr);
    }
}

轉(zhuǎn)發(fā)html頁面

//既可以轉(zhuǎn)發(fā)Servlet類也可以轉(zhuǎn)發(fā)html(屬于Web容器當(dāng)中合法的資源都可以轉(zhuǎn)發(fā))
request.getRequestDispatcher("/share.html").forward(request,response);

常用方法

//獲取客戶端的IP地址
String remoteAddr = request.getRemoteAddr();
//獲取遠(yuǎn)程的用戶
String remoteUser = request.getRemoteUser();
//獲取遠(yuǎn)程的主機(jī)IP
String remoteHost = request.getRemoteHost();
//獲取遠(yuǎn)程的的端口
int remotePort = request.getRemotePort();
//獲取主機(jī)服務(wù)名
String serverName = request.getServerName();
//獲取服務(wù)路徑(項(xiàng)目名稱)
String servletPath = request.getServletPath();
//獲取服務(wù)端口
int serverPort = request.getServerPort();
//獲取Servlet上下文  或者this.getServletContext();
ServletContext servletContext = request.getServletContext();
//指定字符集(解決不同字符集亂碼問題)
response.setCharacterEncoding("utf-8");

點(diǎn)擊下方，第一時(shí)間了解華為云新鮮技術(shù)~

華為云博客_大數(shù)據(jù)博客_AI博客_云計(jì)算博客_開發(fā)者中心-華為云

#華為云開發(fā)者聯(lián)盟#

在線咨詢

上一篇：Python Matplotlib直方圖：揭秘?cái)?shù)據(jù)分布可視化的藝術(shù)
下一篇：JavaScript封裝一個(gè)自己的Ajax并完善與拓展Ajax

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商