Web前端-Ajax基礎技術(上)

来源:https://www.cnblogs.com/dashucoding/archive/2019/03/10/10506321.html
-Advertisement-
Play Games

前端 基礎技術(上) 是瀏覽器提供一套的 ,用於向伺服器發出請求，接受服務端返回的響應，通過 調用，實現通過代碼控制請求與響應，實現網路編程。 發送請求： 協議： 進行初始化，建立連接，接收響應，響應體載入，載入成功！ 非同步的 和 用於創建快速動態網頁的技術 對象 向伺服器發送請求 請求類型，為 和 ...


Web前端-Ajax基礎技術

Web前端-Ajax基礎技術(上)

ajax是瀏覽器提供一套的api,用於向伺服器發出請求，接受服務端返回的響應，通過javascript調用，實現通過代碼控制請求與響應，實現網路編程。

ajax發送請求：

<!DOCTYPE html>
<html lang="en">
<head>
 <meat charset="UTF-8">
 <title>Ajax</title>
</head>
<body>
 <script>
  // ajax是一套api核心提供的類型：
  var xhr = new XMLHttpRequest();
  xhr.open();
  xhr.send();
  
  xhr.onreadystatechange = function(){
   if(this.readyState != 4) return
   // 獲取響應的內容
   console.log(this.responseText);
  }
 </script>
</body>
</html>
<script>
var xhr = new XMLHttpRequest()
console.log(xhr.readyState);

xhr.open('GET', 'xxx.php')
console.log(xhr.readyState); // 1 初始化 請求代理對象

xhr.send()
console.log(xhr.readyState); // 1

xhr.addEventListener('readystatechange', function(){
 // if(this.readyState != 4) return
 // console.log(this.readyState);
})
// ajax創建一個XMLHttpRequest類型的對象，相當於打開一個瀏覽器
var xhr = new XMLHttpRequest()
// 打開一個網址之間的連接
xhr.open('GET','##.php')
// 通過連接發送一次請求
xhr.send(null)
// 指定xhr狀態變化事件處理函數
xhr.onreadystatechange = function() {
 // 通過xhr 的readyState判斷請求的響應
 if(this.readyState === 4){
   console.log(this);
 }
}
<script>
var xhr = new XMLHttpRequest();
xhr.open('GET', 'xxx.php')
xhr.send(null)
xhr.onload=function(){
 console.log(this.readyState)
 console.log(this.responseText)
}
</script>

http協議：

<script>
var xhr = new XMLHttpRequest()
xhr.open('GET', '/##.php') // 設置請求行
// xhr.setRequestHeader('HH', 'DA') // 設置一個請求頭
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('key=value&key1=value1') // 設置請求體
<body>
 <form action="##.php" method="post">
  <input type="text" name="name" id="">
  <button>提交</button>
 </form>
</body>
// http
// 設置請求報文的請求行
xhr.open('GET', './###.php')
// 設置請求頭
xhr.setRequestHeader('Accept', 'text/plain')
// 設置請求體
xhr.send(null)

xhr.onreadystateChange = function() {
 if(this.readyState === 4) {
  // 獲取響應狀態碼
  console.log(this.status)
  // 獲取響應狀態描述
  console.log(this.statusText)
  // 獲取響應頭信息 
 // 獲取指定響應頭
 console.log(this.getResponseHeader('Content-Type'))
 // 獲取全部響應頭
 console.log(this.getAllResponseHeader())
 // 獲取響應體
 // 獲取響應文本形式
 console.log(this.responseText) 
 // 獲取xml形式
 console.log(this.responseXML)
  }
}

進行初始化，建立連接，接收響應，響應體載入，載入成功！

// get請求
var xhr = new XMLHttpRequest()
xhr.open('GET', '.##.php?id=1')
// 一般get請求無需設置響應體
xhr.send(null);
xhr.onreadystatechange = function(){
 if(this.readyState === 4) {
  console.log(this.responseText);
 }
}
// post
if(empty($_GE['id])) {
 $json = json_encode($data);
 echo $json;
}else{
 foreach($data as $item) {
  if($item['id'] != $_GET['id'] continue;
 $json = json_encode($data);
 echo $json;
 }
}

非同步的 JavaScript 和 XML

AJAX = Asynchronous JavaScript and XML

用於創建快速動態網頁的技術
XMLHttpRequest 對象

var xhr;
if (window.XMLHttpRequest){
  xhr=new XMLHttpRequest();
  }
else{
  xhr=new ActiveXObject("Microsoft.XMLHTTP");
  }

向伺服器發送請求

xmlhttp.open("GET","123.txt",true);
xmlhttp.send();

請求類型，為get和post，url文件在伺服器上的位置，true非同步和false同步。

xhr.open("POST","###.asp",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("name=da&age=12");

onreadystatechange 事件
XMLHttpRequest 的狀態信息，從0到4變化，0為請求未初始化，1為建立連接成功，2為請求已接收，3為請求處理中，4為請求完成。

xhr.onreadystatechange=function() {
  if (xhr.readyState==4 && xhr.status==200)  {
    }
  }
<ul id="list"></ul>

var listElement = document.getElementById('list');

var xhr = new XMLHttpRequest();
xhr.open('GET', '###。php?id=2');
xhr.send(null)
xhr.onreadystatechange = function() {
 if(this.readyState != 4) return
 // console.log(this.responseText)
 var data = JSON.parse(this.responseText)
 for(var i = 0; i<data.length; i++) {
  var liElement = document.createElement('li');
  liElement.innerHTML = data[i].name;
  listElement.appendChild(liElement);
 }
}
xhr.onreadystatechange = function() {
 if(this.readyState != 4) return
 var data = JSON.parse(this.responseText)
 for(var i = 0; i<data.length; i++){
  var liElement = document.createElement('li')
  liElement.innerHTML = data[i].name;
  liElement.id=data[i].id
  listElement.appendChild(liElement);
  
  liElement.addEventListener('click', function() {
   var xhr1 = new XMLHttpRequest();
   xhr1.open('GET', '###.php?id=' + this.id)
   xhr1.send()
   xhr1.onreadystatechange = function() {
    if(this.readyState != 4) return
    var obj = JSON.parse(this.responseText)
    alert(obj.age)
   }
  }
 }
}

onreadystatechange事件
readyState返回當前請求的狀態
responseBody將回應信息文體
status返回當前請求的狀態碼
statusText返回當前請求的響應的狀態
abort取消當前請求
getAllResponseHeaders獲取響應指定的http頭
open創建一個新的http請求
send發送請求到http伺服器並接收回應
setRequestHeader指定請求頭

效果

<?php
if(empty($_POST['username']) || empty($_POST['password'])) {
 exit('請輸入用戶名和密碼');
}
// 校驗
$username = $_POST['username'];
$password = $_POST['password'];
if($username === 'admin' && $password === '123') {
 exit('成功');
}

exit('失敗');
?>
var btn = document.getElementById('btn');
// 獲取元素
var txtUsername = document.getElementById('username');
var textPassword = document.getElementById('password');
btn.onclick = function() {
 var username = txtUsername.value;
 var password = txtPassword.value;
 var xhr = new XMLHttpRequest();
 xhr.open('POST', '##.php');

 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
 // xhr.send('username=' + username + '&password=' + password)
 xhr.send(`username=${username}&password=${password}`);
 // 界面
 xhr.onreadystatechange = function() {
 if(this.readyState != 4) return
 console.log(this.responseText);
 }
}
// jquery中的ajax
$.ajax({
 type: 'GET',
 url: "###.php?id="+$('#id').val(),
 dataType: "json"
 success: function(data){
  $("jq").html();
 }else{
  $("jq").html();
 },
 error: function(jq) {
  alert();
 }
})
$.ajax({ 
  type: "POST",
  url: "ajax.php", 
  dataType: "json", 
  data: {"username": "admin","password": 123}, 
  success: function(msg) { 
    console.log(msg) 
  }, 
  error: function() { 
    console.log("error") 
  } 
})
function creathttprequest(){
    if(window.XMLHttpRequest)
        var xml=new XMLHttpRequest();
    else
        var xml=ActiveXObject("Miscrosoft.XMLHTTP");
    return xml;
}

function addAjax() {

    var xml = createhttprequest();

    xml.open("POST","123.php",false);   
    xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xml.send(url);

    if( xml.readyState == 4 && xml.status == 200 ) {
        alert(xml.responseText);
    }
}

響應數據

<?php
 header('Content-Type: application/xml');
?>

<?xml version="1.0" encoding="utf-8"?>
<person>
 <name>dashu</name>
 <age>16</age>
 <gender>男</gender>
</person>
<script>
var xhr = new XMLHttpRequest()
xhr.open('GET', '###.php')
xhr.send()
xhr.onreadystatechange = function() {
 if(this.readyState != 4) return
 // console.log(this.responseXML)
// console.log(this.responseXML.documentElement.getElementsByTagName('name')[0])
 // console.log(this.responseXML.documentElement.children[0].innerHTML)
}

如何解析服務端的數據：

<table>
 <tbody id="content"></tbody>
</table>

<script>
 var xhr = new XMLHttpRequest()
 xhr.open('GET', '###.php')
 xhr.send()
 xhr.onreadystatechange = function() {
  if(this.readyState != 4) return
  var res = JSON.parse(this.responseText);
  
 var data = res.data
 for(var i = 0; i<data.length; i++) {
  var tr = document.createElement("tr");
  var td = document.createElement("td");

  td.innerHTML = data[i].id;
  
 }
 
 }
</script>

相容：

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

模板：

https//aui.github.io/art-template/

面試手寫：

var xhr = new XMLHttpRequest();

xhr.open('GET', '###.php');

xhr.send(null);

xhr.onreadystatechange = function() {

 if(this.readyState === 4){
  console.log(this);
 }

}

實例：

<script>
function add(){
    var xhr;
    if (window.XMLHttpRequest){
        xhr=new XMLHttpRequest();
    }else{
        xhr=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xhr.onreadystatechange=function(){
        if (xhr.readyState==4 && xhr.status==200)
        {
            document.getElementById("div").innerHTML=xhr.responseText;
        }
    }
    xmlhttp.open("GET","/info.txt",true);
    xmlhttp.send();
}
</script>

效果

實例：

<script>
 function change(str){
  if(str == ""){
   document.getElementById("txt").innerHTML="";
   return;
  }
  if(window.XMLHttpRequest){
   xhr=new XMLHttpRequest();
  }else{
   xhr=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xhr.onreadystatechange=function(){
    if (xhr.readyState==4 && xhr.status==200){
     document.getElementById("txt").innerHTML=xhr.responseText;
    }
  }
 xhr.open('GET','###.php?id=' + str, true);
 xhr.send();
 }
</script>

<form>
 <select name="users" onchange="change(this.value">
  <option value=""></option>
  <option value="1"></option>
  <option value="2"></option>
 </select>
</form>

<div id="txt"></div>

//php

$id = isset($_GET["id"]) ? intval($_GET["id"]) : '';

$con = mysqli_connect('localhost','root','123456');

if (!$con)
{
    die('連接失敗: ' . mysqli_error($con));
}

// 選擇資料庫
mysqli_select_db($con,"test");

// 設置編碼
mysqli_set_charset($con, "utf8");

$sql="SELECT * FROM Websites WHERE id = '".$id."'";
 
$result = mysqli_query($con,$sql);

結言

好了，歡迎在留言區留言，與大家分享你的經驗和心得。

感謝你學習今天的內容，如果你覺得這篇文章對你有幫助的話，也歡迎把它分享給更多的朋友，感謝。

作者簡介

達叔，理工男，簡書作者&全棧工程師，感性理性兼備的寫作者，個人獨立開發者，我相信你也可以！閱讀他的文章，會上癮！，幫你成為更好的自己。長按下方二維碼可關註，歡迎分享，置頂尤佳。

努力努力再努力Jeskson


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 2018-11-09 VS Code英漢詞典插件v0.0.4-駝峰下劃線命名
    首先, 在兩天時間內安裝數破百, 多謝支持. VS Code插件市場地址: "英漢詞典 Visual Studio Marketplace" 開源庫地址同前文: "Visual Studio Code插件 英漢詞典初版發佈" 查詢單詞功能基本不變, 在詳細信息的開頭添加了原詞: 如題圖, 支持駝峰命 ...
  • es6基礎知識
    1.超引用:(...) 用於取出參數對象中的所有可遍歷屬性，拷貝到當前對象之中 2.解構賦值: 賦值: 解構: 3. for of迴圈: es5的for迴圈: for in 迴圈: for of 迴圈:(不能用來遍歷json) 4.Map對象 map對象是因為for of 的出現才出現的,一個map ...
  • webpack初起步
    webpack 用於編譯 JavaScript 模塊。一旦完成安裝，就可以通過 webpack 的 CLI 或 API 與其配合交互。 首先創建一個目錄，進入目錄中，初始化npm 然後本地安裝webpack，webpack-cli ，lodash 目錄結構： index.html webpack.c ...
  • 瀏覽器數據存儲方式總結
    今天主要來講下前端的數據存儲，說起數據存儲，大家肯定第一時間想起cookie，localstorage，sessionstorage，而其實還有userData和IndexedDB這兩種數據存儲，接下來將對它們進行一個比較詳細的總結 一、為什麼要進行數據存儲 隨著Web應用程式的出現，慢慢的也開始產 ...
  • 區分escape、encodeURI和encodeURIComponent
    一、escape和它們不是同一類 簡單來說，escape是對字元串(string)進行編碼(而另外兩種是對URL)，作用是讓它們在所有電腦上可讀。編碼之後的效果是%XX或者%uXXXX這種形式。其中 ASCII字母、數字、@*/+ ，這幾個字元不會被編碼，其餘的都會。最關鍵的是，當你需要對URL編碼 ...
  • 【帶著canvas去流浪】（1）繪製柱狀圖
    示例代碼托管在： "http://www.github.com/dashnowords/blogs" 博客園地址： "《大史住在大前端》原創博文目錄" 華為雲社區地址： "【你要的前端打怪升級指南】" [TOC] 一. 任務說明 使用原生 繪製柱狀圖。（柱狀圖截圖來自於百度Echarts官方示例庫 ...
  • 關於<button> 沒寫 type='button' 導致點擊時提交以及<button>和<input type="button">的區別
    這是我的第一篇博客，如果寫的不好，請見諒 這是一個關於button按鈕一個小問題 最近剛開學跟著老師一起寫代碼，在模仿JAVA web程式設計（慕課版） P61頁第三章 Ajax處理XML的代碼中發現了一個問題， 我的代碼在點擊獲取按鈕後會突然閃現留言並消失，然後點擊四次按鈕後會出現結果。 在詢問老 ...
  • 谷歌瀏覽器禁用的埠號
    谷歌瀏覽器禁用的埠號： 1, // tcpmux 7, // echo 9, // discard 11, // systat 13, // daytime 15, // netstat 17, // qotd 19, // chargen 20, // ftp data 21, // ftp a ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類