2. 程式人生 > >js原生ajax

js原生ajax

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

AJAX

準備工作-伺服器環境的搭建

ajax可以在本地使用，但是牽扯到不同源問題，需要跨域操作。下面是兩個檔案的程式碼，test.html放在桌面上，cors.php放在搭好的伺服器上面，我這裡配置的埠號是9096，埠號可以自行配置，預設的話是80埠，雙擊開啟test.html檔案，控制檯會輸出下面資訊 

{"code":200,"msg":"success"}

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta
 
 name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script>
        $.get("http://localhost:9096/testCode/cors/cors.php"
 
).done(function(data){
                console.log(data)
        })
    </script>
</body>
</html>

cors.php

<?php 
    header("access-control-allow-origin: *");
    $result = array(
        'code' => 200,
        'msg' => 'success'
    );
    if($_GET['callback'])
        echo
 
 ';'. $_GET['callback'] . '(' . json_encode($result) .')';
    else
        echo json_encode($result);
?>

對上面這些不懂得可以直接忽略，不影響下面學習，學習ajax最好在本地配置一個伺服器，將程式碼放在伺服器下面對應的資料夾中通過127.0.0.1或者localhost或者配置虛擬主機來訪問。

最簡單的辦法是在網上下載一個整合的環境，我們以php語言和apache服務為例，比如整合環境phpstudy、wamp等，愛鼓搗的碼友可以自己動手一步一步的配置。我本地使用的是phpstudy整合環境，安裝使用都比較方便，也不大才35.6M。

溫馨提示：看到這裡的預設已經在本地搭建好伺服器，並將埠號配置為9096，如果沒有配置埠號將下面的9096替換為80或者省去即可。下面的程式碼均放在伺服器下面通過127.0.0.1或者localhost或者配置虛擬主機來訪問。

什麼是Ajax

全稱 Asynchronous JavaScript and XML (非同步JavaScript和XML)

用JavaScript非同步的形式去操作xml，它要完成的工作也就是資料互動。

資料互動也就是可以從某個地方拿取資料，也可以傳送資料到某個地方。

一般情況下我們會使用ajax和後端（php、nodejs等）進行資料互動，我們會把資料傳送給後端，後端接收到資料後做出一些操作後返回一些資料給我們，這就是資料互動，ajax做的就是這一塊。

它有一個特點，就是體現在非同步互動上面，可以節約使用者時間，提高使用者體驗，減少資料請求等。

ajax可以在不重新整理頁面的情況下發送一個請求到某個地方獲取一些資料。

例子：這裡以一個靜態檔案作為例子，test.html與1.txt在同一級，都在伺服器下面的www目錄下，我們開啟瀏覽器，訪問localhost:9096/test.html，單擊按鈕將會請求同一目錄下1.txt檔案的內容，如果成功的話會彈出一個彈出框顯示hello,ajax!。

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = function(){
            var oBtn = document.getElementById('btn');
            oBtn.onclick = function(){
                //ajax的整個流程可以理解為瀏覽器操作，比如：
                var xhr = new XMLHttpRequest();//可以想象為開啟瀏覽器
                xhr.open('get','1.txt',true);//在位址列輸入地址
                xhr.send();//按下回車提交
                //等待瀏覽器返回內容
                xhr.onreadystatechange = function(){
                    if (xhr.readyState == 4) {//返回內容
                        if(xhr.status == 200){//200成功狀態碼
                            alert(xhr.responseText);
                        }else{
                            alert('出錯了,Err:' + xhr.status );
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
    <input type="button" value="按鈕" id="btn">
</body>
</html>

1.txt

hello,ajax!

建立Ajax物件

  1. 建立一個ajax物件,上面的new XMLHttpRequest()適用通用瀏覽器，ie6以下是new ActiceXObject(‘Microsoft.XMLHttp’),對此我們需要解決相容性問題。
//方法一：
var xhr = null;
if(window.XMLHttpRequest{
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiceXObject('Microsoft.XMLHTTP');
}
//方法二：
var xhr = null;
try{
    xhr = new XMLHttpRequest();
}catch(e){
    xhr = new ActiceXObject('Microsoft.XMLHttp');
}

資料的請求

open方法有三個引數

  1. 開啟方式，也就是請求方式(get、post等，其他的可以在網上找一下)

    • get
      • 把資料名稱和資料值用等號（=）連線，如果有多個的話，那麼它會把多個數據組合用&進行連線，然後把資料放到url？後面傳到指定頁面
      • url長度限制的原因，我們不要通過get方式傳遞過多的資料
    • post
      • 理論上無限制，實際上我們可以通過改變php.ini配置檔案中的post_max_size來限制傳送資料的大小

  2. 請求地址

    • 資料提交的地址，預設是當前頁面

  3. 是否非同步

    • 非同步：非阻塞，前面的程式碼不會影響後面程式碼的執行
    • 同步：阻塞，前面的程式碼會影響後面程式碼的執行

setRequestHeader方法

  • xhr.setRequestHeader(‘content-type’,’application/x-www-form-urlencoded’);//申明發送的資料型別

send方法

  • get請求的send方法無需引數，例如：xhr.send();get請求的資料放在url中,例如
xhr.open('get','get.php?username=zhou&age=21',true);
  • post請求的資料放在send方法裡面，例如：
xhr.send('username=zhou&age=21');

資料的獲取

onreadystatechange事件: (on readystate change)當readyState改變的時候觸發

readyState : ajax工作狀態

  • 0 （未初始化）物件已經建立，但還沒有呼叫open()方法
  • 1 （啟動）已經呼叫open() 方法，但尚未呼叫send()方法傳送請求
  • 2 （傳送）send()方法已呼叫，請求已經發送完成，但尚未接收到響應
  • 3 （接收）已經接收到部分響應資料
  • 4 （完成）已經接收到了全部資料，而且已經可以在客戶端使用了

status : 伺服器狀態，http狀態碼

responseText : ajax請求返回的內容就被存放到這個屬性下面

下面是一個例子，text.html和get.php在伺服器下同一級

下面用到了PHP中的json_encode函式，和JS中的JSON.parse()方法，意義在於將這些資料統一轉換為json格式。

text.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = function(){
            var oBtn = document.getElementById('btn');
            oBtn.onclick = function(){
                //建立物件
                var xhr = null;
                try{
                    xhr = new XMLHttpRequest();
                }catch(e){
                    xhr = new ActiceXObject('Microsoft.XMLHttp');
                }
                xhr.open('get','get.php',true);
                xhr.send();//傳送請求

                xhr.onreadystatechange = function(){
                    if (xhr.readyState == 4) {
                        if(xhr.status == 200){//成功
                            alert(JSON.parse(xhr.responseText));
                        }else{
                            alert('出錯了，Err：'+xhr.status);
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
    <input type="button" value="按鈕" id="btn">
</body>
</html>

get.php

<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);// 關閉錯誤報告

$arr = array('zhou','21','男');

echo json_encode($arr);

get請求

get請求有時可能會有快取和亂碼問題，在下面有相應解決方案

例子:

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = function(){
            var oBtn = document.getElementById('btn');
            oBtn.onclick = function(){
                var xhr = null;
                try{
                    xhr = new XMLHttpRequest();
                }catch(e){
                    xhr = new ActiceXObject('Microsoft.XMLHttp');
                }
                xhr.open('get','get.php?username=zhou&age=21',true);
                xhr.send();

                xhr.onreadystatechange = function(){
                    if (xhr.readyState == 4) {
                        if(xhr.status == 200){
                            alert(JSON.parse(xhr.responseText));
                        }else{
                            alert('出錯了，Err：'+xhr.status);
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
    <input type="button" value="按鈕" id="btn">
</body>
</html>

get.php

<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);

$username = $_GET['username'];
$age = $_GET['age'];

echo json_encode("$username,$age");

get請求的響應預設是可以快取的(響應應該包含一個到期時間, 或者有一個驗證器)，get請求被快取，導致頁面資料沒有重新整理，我們有時候需要針對快取問題有一個解決方案：

  1. 快取問題，在url?後面連結一個隨機數，這裡使用時間戳 
xhr.open('get','get.php?username=zhou&age=21&'+new Date().getTime(),true);
  1. 亂碼問題，使用encodeURI對資料進行編碼
xhr.open('get','get.php?username='+encodeURI('周')+'&age=21&'+new Date().getTime(),true);

post請求

  1. post必須要告訴後端傳送的資料是什麼型別的，然後後端才能按照這個型別來解析資料，如果不告訴後端傳送的是什麼型別，後端將不解析。 
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');//post必須要告訴後端傳送的資料是什麼型別的
  1. post方式，資料放在send()裡面作為引數傳遞
xhr.send('username=zhou&age=21');
  1. post和get不一樣，post沒有快取問題，post用來提交資料，是沒有快取的，get一般用來的到資料，可能存在快取問題。這跟ajax沒有關係，跟web機制有關係。
  2. post沒有亂碼問題，因為在傳送資料的時候已經聲明瞭傳送的資料是什麼型別的，所以在傳送資料的時候自動幫你把資料進行編碼,比如下面這個，在傳送資料的時候自動對資料進行url編碼，所以說無需在對資料進行編碼。
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

post請求的例子：

text.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = function(){
            var oBtn = document.getElementById('btn');
            oBtn.onclick = function(){
                var xhr = null;
                try{
                    xhr = new XMLHttpRequest();
                }catch(e){
                    xhr = new ActiceXObject('Microsoft.XMLHttp');
                }
                xhr.open('post','post.php',true);
                xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');//post必須要告訴後端傳送的資料是什麼型別的
                xhr.send('username=zhou&age=21');

                xhr.onreadystatechange = function(){
                    if (xhr.readyState == 4) {
                        if(xhr.status == 200){
                            alert(JSON.parse(xhr.responseText));
                        }else{
                            alert('出錯了，Err：'+xhr.status);
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
    <input type="button" value="按鈕" id="btn">
</body>
</html>

post.php

<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);

$username = $_POST['username'];
$age = $_POST['age'];
echo json_encode("$username,$age");

相關推薦

Js原生Ajax和Jquery的Ajax

fun 一個 表示 post 發的 nco 自動 操作 類型轉換 一、Ajax概述 1．什麽是同步，什麽是異步 同步現象：客戶端發送請求到服務器端，當服務器返回響應之前，客戶端都處於等待卡死狀態 異步現象：客戶端發送請求到服務器端，無論服務器是否返回響應，客戶端都可以隨意做

JS原生Ajax&Jquery的Ajax技術&Json

  1.介紹Ajax Ajax = 非同步 JavaScript 和 XML Ajax是一種建立快速動態網頁的技術 通過在後臺與伺服器進行少量資料交換，Ajax 可以使網頁實現非同步更新。這意味著可以不用整個頁面進行重新整理而是可以進行區域性重新整理。這也是使用Ajax

JS原生ajax請求和JQuery提供的 Ajax請求

原生js實現Ajax方法： var Ajax={ get: function(url, fn) { // XMLHttpRequest物件用於在後臺與伺服器交換資料 var xhr = new XMLHttpRequest();

js原生ajax請求利用promise封裝函式

廢話不多說，直接上程式碼。 /*利用promise封裝的ajax函式*/ function ajax(method,url, data){ /*相容IE*/ var request;

js原生ajax

AJAX 準備工作-伺服器環境的搭建 ajax可以在本地使用，但是牽扯到不同源問題，需要跨域操作。下面是兩個檔案的程式碼，test.html放在桌面上，cors.php放在搭好的伺服器上面，我這裡配置的埠號是9096，埠號可以自行配置，預設的話是80埠，

如何封裝JS原生ajax函式

首先我們要明白ajax的原理和使用步驟 ajax是我們與後臺連線使用的一個文件，主要分為四步，有三步是我們前端工作人員去完成的， 第一步是建立ajax的物件，第二部是傳送請求到後臺，第三步是後臺所編寫的資料，第四步是我們收到後臺返回資料的處理，第四步返回的格式經常的有xml

js原生Ajax 的封裝和原理之淺析

原理及概念 AJAX即“Asynchronous Javascript And XML”（非同步JavaScript和XML），是一種用於建立快速動態網頁的技術。 動態網頁：是指可以通過伺服器語言結合資料庫隨時修改資料的網頁。 靜態網頁，隨著html程式碼的生成，頁

JS-原生ajax

change rom 包括 ade on() 異步 console 空白 result 記錄一下： //post需要設置請求頭 setRequestHeader(name, value)name //頭部的名稱：這個參數不應該包括空白、冒號

原生JS封裝Ajax

tex urlencode new text repl ons xmlhttp tolower 字符 function json2url(json){ 　　//json參數轉字符串 　　json.t=‘‘+Math.random(); 　　json.t=json.t.rep

原生Js封裝ajax方法

() www toupper -type get data function form encodeuri // ajax封裝function ajax(options) { /** * 傳入方式默認為對象 * */ options = opti

用原生js實現ajax、jsonp

原生js 斜杠 lang settime 發送數據 tro upper 類型 之前 一、原生js實現ajax $.ajax({ url: ‘‘, type: ‘post‘, data: {name: ‘zhaobao‘, age: 20}, dataTy

原生JS實現ajax省市區三聯

cal tex -type con arr length view thead () <!-- /** * @fileName: linkageUI.class.php * @author: wk * @DateTime: 2017/10/29 17:25 * @De

原生JS的Ajax

func set 異步 sta .get 完成 var hang 傳遞數據 轉自：https://www.cnblogs.com/yufann/p/JS-Ajax.html 1.創建一個Ajax對象 非IE6瀏覽器：var obj = new XMLHttpRe

原生js使用ajax實現省市縣三級聯動

chang onchange mes ror charset += ctype type nload <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

原生js實現Ajax請求

amp 輸入關鍵字 如果 t對象 避免 用戶輸入 hang 更新 gate 總的來說，Ajax是與服務器交換數據並更新部分網頁的藝術，在不重新加載整個網頁的情況下，異步請求數據並刷新頁面。舉一個小的例子：Goole搜索頁面。當用戶在輸入框輸入關鍵字的時候，JavaScrip

原生的js寫Ajax請求

js Ajax1：界面界面就一個按鈕 和一個用來顯示服務器返回來的數據的div2:js實現Ajax註意：我這裏在創建XMLHttpRequest對象，沒有用兼容性寫法。實際中，需要用兼容性寫法。7步完成 第8步，如果需要處理數據，就處理數據。3：後臺的數據是 json格式的數據 ，是一個數組。4：效果

Ajax (Asynchronous javascript xml) 搜索框核心代碼(JQuery) Ajax判斷用戶名存在核心代碼 附:原生js的Ajax代碼

align tps 代碼 cati tco tst words mic var 前端 <script type="text/javascript"> $(function(){ $("#tid").keyup(function(){

原生js實現Ajax

tle 頭部 簡單 代理 字符 pen lis 交換 var 摘自：https://www.cnblogs.com/colima/p/5339227.html 一般來說，大家可能都會習慣用JQuery提供的Ajax方法，但是用原生的js怎麽去實現Ajax方法呢？ J

原生js的ajax請求

數據交換 strong 當前 thead () 一個數 nbsp send 方法 什麽是ajax 　　AJAX是一種用於創建快速動態網頁的技術。通過在後臺與服務器進行少量數據交換，AJAX可以使網頁實現異步跟新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更

利用原生js實現ajax跨域請求資料

首先，頁面中不需要引入任何的檔案。 1、前臺html頁面 <script> //定義一個ajax var $ = { ajax:function(option){ var url = option.url; var ca