Ajax獲取資料的流程

阿新 • • 發佈：2019-01-16

一、Ajax的物件 XMLHttpRequest的方法

方法	描述
abort()	停止當前請求
getAllResponseHeaders()	把 HTTP請求的所有響應首部作為健／值對返回
getResponseHdader(“header”)	返回指定首部的串值
open(“method”,”url”)	建立對伺服器端呼叫。Method引數可以是GET、POST或PUT。url引數可以是相對URL或絕對URL
send(conten)	向伺服器傳送請求
setRequestHeader(“header”,”value”)	把制定首部設定為所提供的值。在設定任何首部之前必須先呼叫open()

二、傳送請求

setRequestHeader(header,value)

當瀏覽器向伺服器請求頁面時，它會伴隨著這個請求傳送一組首部資訊。這些首部資訊是一系列描述請求的元資料（metadata）.首部資訊用來宣告一個請求是GET還是 POST。
Ajax請求中，傳送首部資訊的工作可以由setRequestHeader完成
引數header :首部的名字；引數 value：首部的值
如果用POST請求向伺服器傳送資料，需要將”Content-type” 的首部設定為 “application/x-www-form-urlencoded”.它會告知伺服器正在傳送資料，並且資料已經符合URL編碼來。

該方法必須在open()之後才能呼叫

三、接收響應

readyState

readyState屬性表示Ajax請求的當前狀態。它的值用數字代表。

0 代表未初始化，還沒有呼叫open 方法
1 代表正在載入，open方法已經被呼叫，但 send方法還沒有被呼叫
2 代表載入完畢。send方法已被呼叫，請求已經開始
3 代表互動中。伺服器正在傳送響應
4 代表完成。響應傳送完畢
每次readyState值的改變，都會觸發readystatechange事件。如果把onreadystatechange事件處理函式賦給一個函式，那麼每次 readyState的值的改變都會引發該函式的執行。
readyState值的變化會因瀏覽器的不同而有所差異。但是，當請求結束的時候，每個瀏覽器都會把readyState的值統一設為4.

例項程式碼呈現

 <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload=function(){
//            1、獲取a節點，併為其新增onclick響應函式
            document.getElementsByTagName("a")[0].onclick=function(){
//                3、建立一個XMLHttpRequest物件
                var request=null;
                request= new XMLHttpRequest();
//                4、準備傳送請求對資料：url
//                增加時間戳起到禁用快取對目的
                var url= this.href+"?time="+new Date();
//                var method="GET";
                var method="POST";


//                5、呼叫XMLHttpRequest 物件對open方法
                request.open(method,url);
                request.setRequestHeader("ContentType","application/x-www-form-urlencoded");

//                6、呼叫XMLHttpRequest對send方法
                request.send("name='atguigu'");

//                7、為XMLHttpRequest 物件新增onreadystatechange響應函式
                request.onreadystatechange=function(){

                    if(request.readyState==4){
                        if(request.status==200||request.status==304){
                            alert(request.responseText);
                        }
                    }
                }

//                8、判斷響應是否完成： XMLHttpRequest物件對readyState 屬性值為4對時候
//                9、再判斷響應是否可用：XMLHttpRequest物件對status屬性值為200
//                10、列印響應結果：responseText
//                2、取消a節點對預設行為
                return false;

            }
        }
    </script>
</head>
<body>
    <a href="helloAjax.txt" >Ajax</a>
</body>
</html>

Ajax獲取資料的流程

一、Ajax的物件 XMLHttpRequest的方法方法描述 abort() 停止當前請求 getAllResponseHeaders() 把 HTTP請

Vue.js 通過jQuery ajax獲取資料實現更新後重新渲染頁面

1. 引入jquery和vue.js <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script

前端使用JSP來進行開發，用AJAX獲取資料，控制返回給前端返回的是JSP頁面，還是JSON資料

一，問題以前開發的時候，前端使用JSP或許Thyme Leaf來開發。由於是使用AJAX來獲取資料，所以有時會犯糊塗，如何控制給前端返回頁面，還是一個JSON格式的資料。二，解決方案 2.1 當你需要給前端返回JSON資料時方案就是：在

ajax獲取資料中文亂碼問題最簡單的完美解決方案

$.ajax({ url : "${ctx}/selection/democracyRecommend/partyMzAjaxSelectListNewA?hytjId="+hytjId+"&voteFlag="+voteFlag, type : "POST", data : { numIds : n

select2的使用(ajax獲取資料)

最近專案中用到了select2來做下拉框，資料都是通過ajax從後臺獲取, 支援動態搜尋等。使用到的下拉框分有兩種情況：一種是直接傳送ajax請求渲染列表；另一種因為查詢回的資料有六萬多條，導致整個頁面卡頓，所以採用的是先讓使用者至少輸入3個字以後再動態模糊查詢資料。基本的使用方法

通達OA工作流表單ajax獲取資料使用例項

小程式ajax獲取資料遍歷前幾名樣式不一樣

直接上程式碼 <view class='list' wx:for-index="idx" wx:for="{{datas}}" wx:key='index' bindtap="btnanniu" > <view style='height:50px;' w

jquery方式ajax獲取資料並渲染頁面

var newsData = ''; var mydata = {"pageNum":obj.curr,"pageSize":"5"}; //引數 newsData = getData(mydata); //通過ajax獲取資料 pageNum = newsData.pageNum; $(".

Vue.js--基於$.ajax獲取資料並與元件的data繫結

Vue.js與jQuery不衝突？？？在實際的應用中，幾乎90%的資料是來源於服務端的，前端和服務端之間的資料互動一般是通過ajax請求來完成的。說到ajax請求，第一反應肯定想到了jQuery

React (7) ajax 獲取資料

1. 為什麼要用中介軟體 Action 發出以後，Reducer 立即算出 State，這叫做同步； Action 發出以後，過一段時間再執行 Reducer，這就是非同步。中介軟體就是讓 Reducer 在非同步操作結束後自動執行 store/index.js&nbs

mui上拉載入通過ajax獲取資料，實現分頁

上拉重新整理程式碼 $(document).ready(function(){ //上拉載入下拉重新整理 mui.init({ pullRefresh: {

【未解決】Ajax 獲取資料格式問題

在對某天氣 API 進行請求測試時，使用ajax傳送請求，出現問題：將 dataType 設定為 json 時，會有跨域問題，報錯： XMLHttpRequest cannot load XXX. No ‘Access-Control-Allow

爬蟲中ajax獲取資料的方式（get）

在爬資料的時候，有的時候發現driver.get("body").get(0).getText()就不包含所需要的資料圖表，這種情況大多是需要檢視元素--網路，找到能返回json字串或者html（檢視xhr或者html）。然後模擬一個請求，以圖獲取它的響應。以https://

用ajax獲取資料時，總出現undefined

原因是在mapper中select的欄位名和ajax中val.的欄位名不一致，可以通過給select新增屬性別名來解決這個問題這樣就不會因為shop_id對應不上shopId而導致undefined 另外在返回結果集中也要保持名字的一致 ps

vue 中使用 AJAX獲取資料的方法

在VUE開發時，資料可以使用jquery和vue-resource來獲取資料。在獲取資料時，一定需要給一個數據初始值。看下例： <script type="text/javascript"> new Vue({ el:'#app',

echarts畫圓環統計圖並載入動態資料（ajax獲取資料）

最近，要用到echarts畫餅圖統計圖，於是學習了會，附上echarts官網 http://echarts.baidu.com/doc/example.html 看到echarts有一些餅圖例項，程式碼如下： option = { tooltip : {

Datatables學習（二）ajax獲取資料

上一篇文章，講解了datatables的基本建立，這一講講解datatables通過ajax非同步獲取資料 1、前提準備以一個圖書管理的表格為例，後臺java程式碼就不細說了，這裡主要講解前端資料庫表結構如下: 實體類 package com.che.p

AJAX獲取資料然後顯示在頁面

主要功能流程介紹迴圈獲取列表資料點選列表資料進入詳情頁點選報名參加彈出報名成功提示框點選提示框中的確定按鈕，跳回列表頁程式碼實現流程和解說一、列表頁 1、訪問連結list.php時判斷是pc端還是客戶端 $user_a

Select2-Ajax獲取資料

遇到一個需求: 在前端使用Select2設計一個聯想輸入dropdown, 通過Ajax動態抓取資料如果用純H5來實現極其簡單, 這裡需要用Select2外掛來實現可以也使用H5原生onChange來進行動態提交但是這太愚蠢了, 現成的Select有

ajax獲取資料在ajax外使用

噹噹噹，我又來了，今天為大家帶來技術分享。學習前端的各位大神還請多指教，或許內容並不是最好的方法，但至少是我最近琢磨出來的，要是和其他同學想法一樣了，那還挺有緣，哈哈哈，好廢話就不說了，切入正題。就在最近幾天，我在用ajax，有遇到了一個問題，就是如何讓ajax內的資料在外面

Ajax獲取資料的流程

一、Ajax的物件 XMLHttpRequest的方法

二、傳送請求

setRequestHeader(header,value)

三、接收響應

readyState

相關推薦