php下的原生ajax請求

瀏覽器中為我們提供了一個JS對象XMLHttpRequet，它可以幫助我們發送HTTP請求，并接受服務端的響應。

意味著我們的瀏覽器不提交，通過JS就可以請求服務器。
?
ajax(Asynchronous Javascript And XML)其實就是通過XHR對象，執行HTTP請求。
?
1、創建XHR對象
1
var?xhr =?new?XMLHttpRequest();?//暫不考慮兼容
2、XHR的對象屬性和方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
方法：
open("get/post", url, true/false);
//有參數則k=v&k1=v1這種形式
send(null);
?
屬性：
//代表請求狀態，不斷變化，為4時，請求結束
readyState
//響應的內容
responseText
//響應的狀態碼200，403，404
status
//狀態文字
statusText
?
事件：
//當readyState變化時會觸發此事件
onreadystatechange =?function() {};
3、通過XHR對象發送get請求
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
????<head>
????????<title>ajax</title>
????????<meta charset="UTF-8">
????????<meta name="viewport"?content="width=device-width, initial-scale=1.0">
????</head>
????<body>
????????<div id="box">
????????????<input type="text"?name="con"?value=""?id="con"?/>
????????</div>
????</body>
????<script type="text/javascript">
????????var?ipt = document.getElementById("con");
?
????????ipt.onblur =?function?() {
????????????var?con = this.value;
????????????//創建XHR對象
????????????var?xhr =?new?XMLHttpRequest();
????????????//設置請求URL
????????????var?url =?"./ajax.php?con="?+ con;
????????????//設置XHR對象readyState變化時響應函數
????????????xhr.onreadystatechange =?function?() {
????????????????//readyState是請求的狀態，為4表示請求結束
????????????????if?(xhr.readyState == 4) {
????????????????????//responseText服務器響應的內容
????????????????????alert("服務器響應數據："?+ this.responseText);
????????????????}
????????????};
????????????//打開鏈接
????????????xhr.open("get", url, true);
????????????//發送請求
????????????xhr.send(null);
????????}
????</script>
</html>
ajax.php如下：
1
2
3
<?php
$con?= !empty($_GET['con']) ? trim($_GET['con']) :?'沒有數據';
echo?$con;
填入數據，當鼠標焦點離開input時，觸發請求，彈出響應內容。
?
4、通過XHR對象發送post請求
(1)、open()第1參數為post
(2)、POST的參數以k=v&k1=v1&k2=v2的形式拼接，并用send()發送
(3)、必須要設置Content-Type為application/x-www-form-urlencoded
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
????<head>
????????<title>ajax</title>
????????<meta charset="UTF-8">
????????<meta name="viewport"?content="width=device-width, initial-scale=1.0">
????</head>
????<body>
????????<div id="box">
????????????<input type="text"?name="name"?value=""?id="name"?/>
????????????<input type="password"?name="pwd"?value=""?id="pwd"?/>
????????????<input type="submit"?name="sub"?value="提交"?id="sub"?/>
????????</div>
????</body>
????<script type="text/javascript">
????????var?sub = document.getElementById("sub");
?
????????sub.onclick =?function?() {
????????????var?name = document.getElementById("name").value;
????????????var?pwd = document.getElementById("pwd").value;
????????????//創建XHR對象
????????????var?xhr =?new?XMLHttpRequest();
????????????//設置請求URL
????????????var?url =?"./ajax.php";
????????????//設置XHR對象readyState變化時響應函數
????????????xhr.onreadystatechange =?function?() {
????????????????//readyState是請求的狀態，為4表示請求結束
????????????????if?(xhr.readyState == 4) {
????????????????????//responseText服務器響應的內容
????????????????????alert("服務器響應數據："?+ this.responseText);
????????????????}
????????????};
????????????//打開鏈接
????????????xhr.open("post", url, true);
????????????//設置請求頭部
????????????xhr.setRequestHeader("Content-Type",?"application/x-www-form-urlencoded");
????????????//發送請求
????????????xhr.send("name="?+ name +?"&pwd="?+ pwd);
????????}
?
????</script>
</html>
ajax.php如下：
1
2
3
4
<?php
$name?= !empty($_POST['name']) ? trim($_POST['name']) :?'沒有數據';
$pwd?= !empty($_POST['pwd']) ? trim($_POST['pwd']) :?'沒有數據';
echo?'用戶名：',?$name,?'密碼：',?$pwd;
單擊submit后發送post請求，彈出響應信息。
?
5、返回值json，html，text，xml
返回值只有兩種text，和xml。不過text內容中可以是一段html或json結構的字符串。
?
(1)、返回json格式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
????<head>
????????<title>ajax</title>
????????<meta charset="UTF-8">
????????<meta name="viewport"?content="width=device-width, initial-scale=1.0">
????</head>
????<body>
????????<div id="box">
????????????<select id="city"></select>
????????????<input type="button"?value="獲取"?id="get"?/>
????????</div>
????</body>
????<script type="text/javascript">
????????var?get = document.getElementById("get");
????????var?city = document.getElementById("city");
?
????????get.onclick =?function?() {
????????????//創建XHR對象
????????????var?xhr =?new?XMLHttpRequest();
????????????//設置請求URL
????????????var?url =?"./ajax.php";
????????????//設置XHR對象readyState變化時響應函數
????????????xhr.onreadystatechange =?function?() {
????????????????//readyState是請求的狀態，為4表示請求結束
????????????????if?(xhr.readyState == 4) {
????????????????????//responseText服務器響應的內容
????????????????????//通過eval把傳來的json字符串轉成對象
????????????????????var?data =?eval(this.responseText);
????????????????????var?str =?"";
????????????????????for(var?ix in data) {
????????????????????????str +=?"<option value='"?+ data[ix].id +?"'>"?+ data[ix].name +?"</option>";
????????????????????}
????????????????????city.innerHTML = str;
????????????????}
????????????};
????????????//打開鏈接
????????????xhr.open("get", url, true);
????????????//發送請求
????????????xhr.send(null);
????????}
????</script>
</html>
ajax.php如下：
1
2
3
4
5
6
7
<?php
$data?=?array(
????array('id'?=> 1,?'name'?=>?'上海'),
????array('id'?=> 2,?'name'?=>?'北京'),
????array('id'?=> 3,?'name'?=>?'深圳'),
);
echo?json_encode($data);
(2)、返回xml格式
xml通過responseXML來讀取，responseXML不是字符串，是DOM對象。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
????<head>
????????<title>ajax</title>
????????<meta charset="UTF-8">
????????<meta name="viewport"?content="width=device-width, initial-scale=1.0">
????</head>
????<body>
????????<div id="box">
????????????<div id="news"></div>
????????????<input type="button"?value="獲取"?id="get"?/>
????????</div>
????</body>
????<script type="text/javascript">
????????var?get = document.getElementById("get");
????????var?news = document.getElementById("news");
?
????????get.onclick =?function?() {
????????????//創建XHR對象
????????????var?xhr =?new?XMLHttpRequest();
????????????//設置請求URL
????????????var?url =?"./ajax.php";
????????????//設置XHR對象readyState變化時響應函數
????????????xhr.onreadystatechange =?function?() {
????????????????//readyState是請求的狀態，為4表示請求結束
????????????????if?(xhr.readyState == 4) {
????????????????????//responseXML服務器響應的內容
????????????????????var?data = this.responseXML;
????????????????????var?str =?"";
????????????????????var?title = data.getElementsByTagName("title");
????????????????????str +=?"<p>"?+ title[0].childNodes[0].nodeValue +?"</p>";
????????????????????str +=?"<p>"?+ title[1].childNodes[0].nodeValue +?"</p>";
????????????????????str +=?"<p>"?+ title[2].childNodes[0].nodeValue +?"</p>";
????????????????????news.innerHTML = str;
????????????????}
????????????};
????????????//打開鏈接
????????????xhr.open("get", url, true);
????????????//發送請求
????????????xhr.send(null);
????????}
????</script>
</html>
ajax.php如下：
1
2
3
4
5
6
7
8
9
10
11
<?php
header('Content-Type: text/xml;charset=utf-8');
$xml?= <<<EOD
<?xml version="1.0"?encoding="utf-8"?>
<news>
????<title>111</title>
????<title>222</title>
????<title>333</title>
</news>
EOD;
echo?$xml;
6、ajax的同步與異步
通過設置open()的第三個參數true/false，來查看請求的效果。
?
同步請求：
發送請求->等待結果->操作完成->繼續后面代碼。我們必須等待結果處理完畢后才能繼續后面的代碼，嚴格按照步驟一步一步執行。
?
異步請求：
發送請求->繼續后面代碼->響應結果接收完畢->操作結果。異步請求在發送請求之后沒有等待結果的返回而是繼續執行后面的代碼，也就是說在結果返回之前用戶可以操作其他東西。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/247656.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/247656.shtml
英文地址，請注明出處：http://en.pswp.cn/news/247656.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

HBase性能優化總結

HBase性能優化總結

HBase性能優化方法總結&#xff08;一&#xff09;&#xff1a;表的設計 1. 表的設計 1.1 Pre-Creating Regions 默認情況下&#xff0c;在創建HBase表的時候會自動創建一個region分區&#xff0c;當導入數據的時候&#xff0c;所有的HBase客戶端都向這一個region寫數據&#x…
閱讀更多...
.NetCore如何使用ImageSharp進行圖片的生成

.NetCore如何使用ImageSharp進行圖片的生成

ImageSharp是對NetCore平臺擴展的一個圖像處理方案&#xff0c;以往網上的案例多以生成文字及畫出簡單圖形、驗證碼等方式進行探討和實踐。 今天我分享一下所在公司項目的實際應用案例&#xff0c;導出微信二維碼圖片&#xff0c;圓形頭像等等。 一、源碼獲取 Git項目地址&…
閱讀更多...
vue2工程

vue2工程

vue當然可以使用script標簽引入&#xff0c;不需任何依賴即可按照vue的語法進行使用。但中大型商用項目中&#xff0c;還是建議使用工程化方式使用vue&#xff0c;vue提供了官方腳手架vue-cli&#xff0c;可以快速構建vue項目&#xff0c;腳手架會幫助開發者創建好建議的工程目…
閱讀更多...
flutte的第一個hello world程序

flutte的第一個hello world程序

用命令行創建項目&#xff1a; flutter create flutterdemo VSCode或者AS連接手機后 輸入 flutter run 編譯后就可以將默認的代碼顯示在手機上了 開始寫hello world 代碼&#xff0c;這段代碼寫在根目錄\lib\main.dart文件中&#xff0c;也是Flutter主文件。 整個代碼如下 impo…
閱讀更多...
Ajax 設置Access-Control-Allow-Origin實現跨域訪問

Ajax 設置Access-Control-Allow-Origin實現跨域訪問

之前遇到的問題整理 ajax跨域訪問是一個老問題了&#xff0c;解決方法很多&#xff0c;比較常用的是JSONP方法&#xff0c;JSONP方法是一種非官方方法&#xff0c;而且這種方法只支持GET方式&#xff0c;不如POST方式安全。 即使使用jquery的jsonp方法&#xff0c;type設為POST…
閱讀更多...
vue工程webpack模板配置說明

vue工程webpack模板配置說明

vue工程webpack模板下的配置文件非常多&#xff0c;只能在實際開發過程中反復熟悉&#xff0c;才能漸漸體會官方將配置文件拆分細化的合理性。 主要配置文件中代碼的作用從網上摘錄了比較全的一份注釋&#xff0c;做下記錄。 dev-server.js 開發服務端配置 require(./check-v…
閱讀更多...
目錄的拼接

目錄的拼接

找到被拼接文件所在的目錄&#xff0c;然后進行拼接 import os 獲取當前目錄&#xff1a; os.path.dirname(__file__) 如下&#xff0c;被拼接文件所在目錄與當前目錄的上級目錄在同一文件夾下&#xff1a; os.path.join(os.path.dirname(os.path.dirname(__file__)),‘文件夾路…
閱讀更多...
vue-resource 攔截器（interceptor）的使用

vue-resource 攔截器（interceptor）的使用

攔截器-interceptor 在現代的一些前端框架上&#xff0c;攔截器基本上是很基礎但很重要的一環&#xff0c;比如Angular原生就支持攔截器配置&#xff0c;VUE的Axios模塊也給我們提供了攔截器配置&#xff0c;那么攔截器到底是什么&#xff0c;它有什么用&#xff1f;攔截器能幫…
閱讀更多...
【GamePlay】入門篇

【GamePlay】入門篇

【GamePlay】入門篇 游戲性編程是指通過一系列游戲系統將游戲想法變成現實的過程。 本次的簡例以NPC設計為主。 通常在進行腳本設計前&#xff0c;對NPC的屬性進行基本的添加和設定&#xff0c;諸如動畫系統、物理系統等等。 1.動畫系統 添加Animator組件&#xff0c;綁定骨骼。…
閱讀更多...
vue axios POST請求中參數以form data和request payload形式的原因

vue axios POST請求中參數以form data和request payload形式的原因

HTTP請求中&#xff0c;如果是get請求&#xff0c;那么表單參數以namevalue&name1value1的形式附到url的后面&#xff0c;如果是post請求&#xff0c;那么表單參數是在請求體中&#xff0c;也是以namevalue&name1value1的形式在請求體中。通過chrome的開發者工具可以看…
閱讀更多...
vue-resource使用

vue-resource使用

vue-resource是一個http請求插件&#xff0c;遵循promise&#xff0c;類似jquery中ajax操作。 vue-resource已不被官方推薦&#xff0c;官方推薦axios插件來操作http協議。 vue-resource中提供的方法 get(url, [options]) head(url, [options]) delete(url, [options]) jso…
閱讀更多...
HttpHttps

HttpHttps

http協議與https Http 客戶端發送一個HTTP請求到服務器的請求消息包括以下格式&#xff1a; **請求行&#xff08;request line&#xff09;、請求頭部&#xff08;header&#xff09;、空行 和請求數據四個部分組成。** Get請求例子&#xff0c;使用Charles抓取的request&…
閱讀更多...
vue2使用axios post跳坑，封裝成模塊

vue2使用axios post跳坑，封裝成模塊

終于將vue-resource替換成axios了&#xff0c;其中像application/x-www-form-urlencoded發送的頭信息以及返回的response結果這兩點都需要注意一下。 其實https://github.com/mzabriskie/axios也有說明的。因為我在vue-resource中使用了Vue.http.options.emulateJSON true;&am…
閱讀更多...
axios使用

axios使用

axios和vue-resource一樣&#xff0c;是一個vue中操作http的插件&#xff0c;遵循promise&#xff0c;vue官方也推薦使用axios。 安裝axios npm i axios -S axios也是在運行時需要的&#xff0c;所以要保存在dependencies中。 引入axios import axios from axios Vue.proto…
閱讀更多...
jQuery length 和 size()區別

jQuery length 和 size()區別

jQuery length和size()區別總結如下&#xff1a; 1.length是屬性&#xff0c;size()是方法。 2.如果你只是想獲取元素的個數&#xff0c;兩者效果一樣既 $("img").length 和 $("img").size() 獲取的值是一樣的&#xff1b;但是如果是獲取字符串的長…
閱讀更多...
一些關于自己的未來的東西

一些關于自己的未來的東西

2019.7.4 自己大一建立對編程的基礎認識&#xff0c;確實培養了一些興趣&#xff0c;入了個門&#xff0c;不過沒有接觸到本質。大二加入到了學校的網站開發團隊&#xff0c;對網站開發后端進行了學習&#xff0c;對后臺開發也有了基礎的學習吧&#xff0c;哈哈可能以后就是要走…
閱讀更多...
Javascript面向對象編程：構造函數的繼承

Javascript面向對象編程：構造函數的繼承

今天要介紹的是&#xff0c;對象之間的"繼承"的五種方法。 比如&#xff0c;現在有一個"動物"對象的構造函數。 function Animal(){ this.species "動物"; } 還有一個"貓"對象的構造函數。 function Cat(name,color){ this.name nam…
閱讀更多...
并發與多線程

并發與多線程

并發 并發&#xff08;concurrency&#xff09;是指CPU在某個時間段內交替處理多任務的能力。每個CPU不可能只顧著執行某個進程&#xff0c;而讓其他進程一直等待被執行。所以&#xff0c;CPU把可執行時間均分成若干份&#xff0c;每個進程執行一份或多份時間后&#xff0c;記錄…
閱讀更多...
有沒有朋友可以幫我解釋一下貼水是什么意思？

有沒有朋友可以幫我解釋一下貼水是什么意思？

通俗易懂的講&#xff1a;貼水便宜&#xff0c;升水貴 當前&#xff0c;螺紋鋼05合約就是貼水01合約 翻譯&#xff0c;螺紋鋼05合約就是比01合約便宜 升水同理 轉載于:https://www.cnblogs.com/luoluo-123/p/11142229.html
閱讀更多...
es6常用點記錄

es6常用點記錄

letconst解構賦值字符串數組函數對象SymbolSetWeakSetMapWeakMapProxyreflectProxy與Reflex結合實例classpromiseiteratorGerneratorDecorators模塊學習資料 let /* let 聲明變量 *//* es6相對于es5的全局和局部作用域&#xff0c;多了一個塊作用域&#xff0c;塊作用域里聲明的…
閱讀更多...
最新文章

Copyright @ 2022~2023