Ajax基礎入門

reclay 發布于2019-08-26 10:55 / 1691人閱讀

摘要：一是什么的全稱是，其中，是異步的意思。一定要注意如果請求是請求格式必須設置請求頭字符串拼接模板字符串

一、ajax是什么？

1、ajax?的全稱是Asynchronous?JavaScript?and?XML，其中，Asynchronous?是異步的意思。 
2、是7種技術的綜合，它包含了：JavaScript、xml、xstl、xhtml、dom、 xmlhttprequest、css   
3、ajax是一個與服務器端語言無關技術
4、ajax返回的數據格式（文本格式、xml、json）
5、作用：
        1、頁面五刷新的動態數據交互
        2、局部刷新頁面
        3、界面的美觀
        4、對數據庫的操作
        5、可以返回簡單的文本格式，也可以返回xml文件格式、json數據格式
      
6、原理
        數據庫
         ↑ ↓
         ↑ ↓
        服務器
          ↑ ↓
http請求  ↑ ↓  http響應（文本/json/xml）
          ↑ ↓
     創建ajax引擎對象
      （瀏覽器）       相當于是一個代理 （幫我買東西，這個就類似ajax 我自己干自己事情）
    (XmlHttpRequest)
         ↑ ↓
         ↑ ↓
         頁面

二、傳統三種方式瀏覽器向服務器發送請求

1、url 回車 刷新
2、特定元素href或者src
3、表單

三、發送Ajax

// 1. 創建一個 XMLHttpRequest 類型的對象 —— 相當于打開了一個瀏覽器
var xhr = new XMLHttpRequest()

// 2. 打開與一個網址之間的連接 —— 相當于在地址欄輸入訪問地址
xhr.open("GET", "./time.php")

// 3. 通過連接發送一次請求 —— 相當于回車或者點擊訪問發送請求
xhr.send(null)

// 4. 指定 xhr 狀態變化事件處理函數 —— 相當于處理網頁呈現后的操作
xhr.onreadystatechange = function () {
// 通過 xhr 的 readyState 判斷此次請求的響應是否接收完成
    if (this.readyState === 4) {
    // 通過 xhr 的 responseText 獲取到響應的響應體
        console.log(this)
    }
}

四、狀態碼

0:初始化請求代理對象
1:open方法已經調用,建立一個與服務端特定端口的連接
2:已經接受到響應報文的響應頭,但拿不到題體
3:正在下載響應報文的響應體，有可能響應體為空，也有可能不完整 // 在這里處理響應體不保險
4: 一切ok 整個響應報文都下載下來

五、請求方法

get方法:通常在一次 GET 請求過程中，參數傳遞都是通過 URL 地址中的 ? 參數傳遞。

HTML


JS
var listElement = document.getElementById("list");

var xhr = new XMLHttpRequest();
// 這里任然是使用URL中問號參數傳遞數據
xhr.open("GET", "users.php");
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;
        // 設置每個元素的id
        liElement.id = data[i].id
        listElement.appendChild(liElement)
        listElement.children[i].addEventListener("click", function () {
            // TODO： 通過ajax操作獲取對應的信息  
            // 如何獲取當前被點擊元素的ID
            var xhr1 = new XMLHttpResquest();
            xhr1.open("GET", "users.php?id"+this.id);
            xhr1.send(null);
            xhr1.onreadystatechange = function () {
                if (this,readystate != 4) return;
                var obj1 = JSON.parse(this.responseText)
                alert(obj1.age)
            }
        }) 
    }
}

// 給每一個li注冊一個點擊事件
// 應為li后來動態創建,不能在這里動態生成  應該移上面
// for (var i = 0; i < listElement.children.length; i ++) {
//    listElement.children[i].addEventListener("click", function () {
//        console.log(11)
 //   })
//}

Post方法：請求過程中，都是采用請求體承載需要提交的數據。

JS
var btn = document.getElementById("btn");
var txtUsername = document.getElementById("username");
var txtPassword = document,getElementById("password")
btn.onclick = function () {
    var username = txtUsername.value;
    var password = txtPassword .value;
    var xhr = new, XMLHttpRequest();
    xhr.open("POST", "login.php");
    // !!!! 一定要注意 如果請求是post請求 urlencoded 格式 必須設置請求頭
    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)
    }
}

GPU云服務器云服務器 ajax基礎教程入門基礎基礎入門 python入門基礎

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106837.html

【連載】前端個人文章整理-從基礎到入門

摘要：個人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現在已經一年的時間了，由于工作比較忙，更新緩慢，后面還是會繼更新，現將已經寫好的文章整理一個目錄，方便更多的小伙伴去學習。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理從最開始萌生寫文章的想法，到著手...

madthumb 2019-08-23 14:15 評論0 收藏0
前端相關大雜燴

摘要：希望幫助更多的前端愛好者學習。前端開發者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實踐譯者張捷滬江前端開發工程師當你問起有關與時，老司機們首先就會告訴你其實是個沒有網絡請求功能的庫。前端基礎面試題(JS部分) 前端基礎面試題(JS部分) 學習 React.js 比你想象的要簡單原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 評論0 收藏0
【前端】javascript__ajax基礎知識入門

摘要：文章標題采用命名規范。所以，實際上是由微軟發明了。將用于處理請求的函數綁定在對象的事件上即可。代表異步，代表同步。首先，這個函數需要跟蹤請求的狀態變化。如果狀態返回值為，代表服務器響應完成，否則，你需要繼續跟蹤狀態。使用來判斷請求是否成功。文章標題采用BEM命名規范。因為筆者想重新夯實一下技術，因此翻譯了MDN上的ajax介紹。英文原文 Ajax是啥 Ajax全名是Asynchron...

YJNldm 2019-08-20 13:34 評論0 收藏0
ajax入門

摘要：不會給后端發送請求。只會復制粘貼，原理啥的也不了解，現在的項目是用，但是是以為基礎的，所以先學一波。可以做到局部刷新，無需重新刷新頁面，擁有更好的用戶體驗。具體的優缺點可以看后面的鏈接，里面還詳講了三次握手和請求的優缺點不會給后端發送請求。只會復制粘貼，原理啥的也不了解，現在的項目是用axios，但是axios是以Ajax+Promise為基礎的，所以先學一波Ajax。Ajax可以做...

cooxer 2019-08-23 17:21 評論0 收藏0