Ajax請(qǐng)求、json、以及原生方法操作接口

1.Ajax請(qǐng)求：

<button onclick="ajaxFn()">ajax獲取數(shù)據(jù)</button>

? ? <script>

? ? ? ? function ajaxFn (){

? ? ? ? let xhr = new XMLHttpRequest();

? ? ? ? /* 0:請(qǐng)求未初始化(還沒(méi)有調(diào)用到open方法) */

? ? ? ? console.log('請(qǐng)求未初始化',xhr.readyState);

? ? ? ? xhr.open('get','abc.txt',true)

? ? ? ? xhr.send();

? ? ? ? /* 1:服務(wù)器連接已建立(已調(diào)用send方法，正在發(fā)生請(qǐng)求) */

? ? ? ? console.log('服務(wù)器連接已經(jīng)建立',xhr.readyState);

? ? ? ? /* onreadystatechange就是用來(lái)監(jiān)聽(tīng)readyState值的變化的 */

? ? ? ? xhr.onreadystatechange = function(){

? ? ? ? ? ? /* 2:請(qǐng)求已接受(send方法完成.已接收到全部響應(yīng)內(nèi)容) */

? ? ? ? ? ? if(xhr.readyState==2){

? ? ? ? ? ? ? ? console.log('請(qǐng)求已接收',xhr.readyState);

? ? ? ? ? ? }

? ? ? ? ? ? /* 3.請(qǐng)求處理中(解析響應(yīng)內(nèi)容) */

? ? ? ? ? ? if(xhr.readyState==3){

? ? ? ? ? ? ? ? console.log('請(qǐng)求處理中',xhr.readyState);

? ? ? ? ? ? }

? ? ? ? ? ? /* 4.請(qǐng)求已完成，且響應(yīng)已就緒 */

? ? ? ? ? ? if(xhr.readyState==4){

? ? ? ? ? ? ? ? console.log('請(qǐng)求已完成',xhr.readyState);

? ? ? ? ? ? }

? ? ? ? ? ? /* xhr.responseText通過(guò)Ajax請(qǐng)求獲得數(shù)據(jù) */

? ? ? ? ? ? /* console.log(xhr.responseText) */

? ? ? ? }

? ? }

? ? ? ? /* 響應(yīng)狀態(tài)碼 */

? ? ? ? /* status為200,201(從緩存讀取) 表示請(qǐng)求成功 */

? ? ? ? /* status為304，表示從http請(qǐng)求中的緩存拿來(lái)的數(shù)據(jù) */

? ? ? ? /* status為404 not found 表示找不到頁(yè)面 多數(shù)前端問(wèn)題*/

? ? ? ? /* status為403 表示沒(méi)有權(quán)限,禁止訪問(wèn) */

? ? ? ? /* status為500 表示服務(wù)端代碼錯(cuò)誤 */

? ? </script>

2.JSON：

JSON寫法模板：

{

? ? "name":"zhangsan",

? ? "age":30,

? ? "flag":true,

? ? "city":null,

? ? "arrList":[{

? ? ? ? "car":"ct5"

? ? },{

? ? ? ? "car":"ct7"

? ? },{

? ? ? ? "car":"ct6"

? ? }]

}

JSON基礎(chǔ)概念：

<!--

? ? ? ? ?JSON是一種輕量級(jí)的數(shù)據(jù)交換格式，它基于 ECMAScript 的一個(gè)子集，采用完全獨(dú)立于編程語(yǔ)言的文本格式來(lái)存儲(chǔ)和表示數(shù)據(jù)

? ? ?-->

? ? ?<!--

? ? ? ? JSON里面可以寫[] 也可以{}

? ? ? ? 但是必須使用雙引號(hào)

? ? ? ? 數(shù)據(jù)在名稱/值對(duì)中

? ? ? ? 數(shù)據(jù)由逗號(hào)分隔

? ? ? ? 大括號(hào)保存對(duì)象

? ? ? ? 中括號(hào)保存數(shù)組

? ? ? ? 可以是數(shù)字、字符串、邏輯值、數(shù)組、對(duì)象、null

? ? ? -->

? ? <button onclick="getData()">獲取用戶信息</button>

? ? <div id="userInfo"></div>

? ? <script>

? ? ? ? /* JSON是一種輕量級(jí)的數(shù)據(jù)交換格式 */

? ? ? ? function getData() {

? ? ? ? ? ? let userInfo = document.getElementById('userInfo');

? ? ? ? ? ? let xhr = new XMLHttpRequest();

? ? ? ? ? ? xhr.open('get', '6.date.json', true);

? ? ? ? ? ? xhr.send();

? ? ? ? ? ? xhr.onreadystatechange = function () {

? ? ? ? ? ? ? ? if (xhr.readyState == 4) {

? ? ? ? ? ? ? ? ? ? /* document.write(JSON.parse(xhr.responseText)) */

? ? ? ? ? ? ? ? ? ? let obj = JSON.parse(xhr.responseText)

? ? ? ? ? ? ? ? ? ? let str =

? ? ? ? ? ? ? ? ? ? ? ? '<h1>姓名：' + obj.name + '</h1>' +

? ? ? ? ? ? ? ? ? ? ? ? '<h1>年紀(jì)：' + obj.age + '</h1>' +

? ? ? ? ? ? ? ? ? ? ? ? '<h1>城市：' + obj.city + '</h1>' +

? ? ? ? ? ? ? ? ? ? ? ? '<h1>汽車：</h1>';

? ? ? ? ? ? ? ? ? ? if (obj.arrList.flag) {

? ? ? ? ? ? ? ? ? ? ? ? for (var i = 0; i < obj.arrList.length; i++) {

? ? ? ? ? ? ? ? ? ? ? ? ? ? str += '<h1>' + obj.arrList[i].car + '</h1>';

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? userInfo.innerHTML = str

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? }

? ? </script>

JSON練習(xí)：

<style>

? ? ? ? * {

? ? ? ? ? ? margin: 0;

? ? ? ? ? ? padding: 0;

? ? ? ? }

? ? ? ? .box {

? ? ? ? ? ? width: 100%;

? ? ? ? ? ? height: 1.5rem;

? ? ? ? ? ? border-bottom: 1px solid #ccc;

? ? ? ? }

? ? ? ? .t {

? ? ? ? ? ? font-size: 16px;

? ? ? ? ? ? margin: .05rem;

? ? ? ? }

? ? ? ? .imgs {

? ? ? ? ? ? width: 100%;

? ? ? ? ? ? display: flex;

? ? ? ? }

? ? ? ? .imgs img {

? ? ? ? ? ? width: 33%;

? ? ? ? ? ? height: 1rem;

? ? ? ? ? ? margin: .05rem;

? ? ? ? ? ? display: block;

? ? ? ? }

? ? </style>

</head>

<body>

? ? <!-- <div class="box">

? ? ? ? <p class="t">看到她這張臉，我就知道未來(lái)的“偶像劇”有希望了</p>

? ? ? ? <div class="imgs">

? ? ? ? ? ? <img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1490879384,162462824&fm=30&app=106&f=JPEG?w=312&h=208&s=3282DD4FCCDA45DEF0057CBA03006011" alt="">

? ? ? ? ? ? <img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1490879384,162462824&fm=30&app=106&f=JPEG?w=312&h=208&s=3282DD4FCCDA45DEF0057CBA03006011" alt="">

? ? ? ? ? ? <img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1490879384,162462824&fm=30&app=106&f=JPEG?w=312&h=208&s=3282DD4FCCDA45DEF0057CBA03006011" alt="">

? ? ? ? </div>

? ? </div> -->

? ? <script>

? ? ? ? let body = document.querySelector('body');

? ? ? ? let xhr = new XMLHttpRequest();

? ? ? ? xhr.open('get', 'newsData.json', true);

? ? ? ? xhr.send();

? ? ? ? xhr.onreadystatechange = function () {

? ? ? ? ? ? if (xhr.readyState == 4) {

? ? ? ? ? ? ? ? let obj = JSON.parse(xhr.responseText);

? ? ? ? ? ? ? ? let str = ''

? ? ? ? ? ? ? ? for (var i = 0; i < obj.length; i++) {

? ? ? ? ? ? ? ? ? ? str +=

? ? ? ? ? ? ? ? ? ? ? ? '<div class="box">' +

? ? ? ? ? ? ? ? ? ? ? ? ? ? '<p class="t">' + obj[i].title + '</p>' +

? ? ? ? ? ? ? ? ? ? ? ? ? ? '<div class="imgs">' +

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? '<img src="' + obj[i].img1 + '" alt="">' +

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? '<img src="' + obj[i].img2 + '" alt="">' +

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? '<img src="' + obj[i].img3 + '" alt="">' +

? ? ? ? ? ? ? ? ? ? ? ? ? ? '</div>' +

? ? ? ? ? ? ? ? ? ? ? ? '</div>';

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? body.innerHTML = str;

? ? ? ? ? ? }

? ? ? ? }

? ? </script>

3.原生方法操作接口：

<body>

? ? <button onclick="login()">請(qǐng)先登錄</button>

? ? <p>

? ? ? ? <button onclick="getUserInfo()">獲取用戶數(shù)據(jù)</button>

? ? </p>

? ? <!-- 真實(shí)接口 用來(lái)登錄的

? ? ? ? ? 使用post方式登錄 -->

? ? <script>

? ? ? ? function getUserInfo(){

? ? ? ? ? ? /* pagenum=1 表示獲取第一頁(yè)的數(shù)據(jù) */

? ? ? ? ? ? /* pagessize=5 表示顯示5條數(shù)據(jù) */

? ? ? ? ? ? if(!localStorage.token){

? ? ? ? ? ? ? ? ?alert('請(qǐng)先登錄獲取token')

? ? ? ? ? ? ? ? ?return;

? ? ? ? ? ? }

? ? ? ? ? ? let xhr = new XMLHttpRequest();

? ? ? ? ? ? let url = 'http://timemeetyou.com:8889/api/private/v1/users?pagenum=1&pagesize=6';

? ? ? ? ? ? xhr.open('get',url,true);

? ? ? ? ? ? xhr.setRequestHeader('Authorization',localStorage.token)

? ? ? ? ? ? xhr.send();

? ? ? ? ? ? xhr.onreadystatechange = function(){

? ? ? ? ? ? ? ? if(xhr.readyState == 4){

? ? ? ? ? ? ? ?let res = JSON.parse(xhr.responseText);

? ? ? ? ? ? ? ?console.log(res);

? ? ? ? ? ? }



? ? ? ? }

? ? }

? ? ? ?function login(){

? ? ? ?let xhr = new XMLHttpRequest();

? ? ? ?let url = 'http://timemeetyou.com:8889/api/private/v1/login';

? ? ? ?xhr.open('post',url,true);

? ? ? ?let params = {username:"admin",

? ? ? ? ? ?password:"123456"};

? ? ? ? ? ?/* post需要添加請(qǐng)求頭 */

? ? ? ? ? ?/* 請(qǐng)求回來(lái)的內(nèi)容是json格式 */

? ? ? ? ? ?/* ?Content-type 表示請(qǐng)求內(nèi)容的類型*/

? ? ? ? ? ?/* application/json 表示請(qǐng)求內(nèi)容類型的具體的值 */

? ? ? ? ? ?xhr.setRequestHeader("Content-type","application/json")

? ? ? ?xhr.send(JSON.stringify(params));

? ? ? ?xhr.onreadystatechange = function(){

? ? ? ? ? ?if(xhr.readyState == 4){

? ? ? ? ? ? ? ?let res = JSON.parse(xhr.responseText);

? ? ? ? ? ? ? ?console.log(res);

? ? ? ? ? ? ? ?localStorage.token = res.data.token;

? ? ? ? ? ? ? ?// location.href="shop.html"

? ? ? ? ? ?}

? ? ? ?}

? ? }

? ? </script>



?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Ajax這種技術(shù)能夠向服務(wù)器請(qǐng)求額外的數(shù)據(jù)而無(wú)須卸載頁(yè)面(即刷新） 一.實(shí)現(xiàn)同步流程： 1、得到核心對(duì)象XMLHt...
    孤嘆汝念之殤閱讀 693評(píng)論 0贊 0
  • // 定義工具方法 let Util = { /** * 發(fā)送異步請(qǐng)求 * @url 請(qǐng)求的地址...
    愛(ài)AJ的范思哲閱讀 3,362評(píng)論 0贊 0
  • 我們自己模仿著jQuery封裝Ajax請(qǐng)求。 原生的Ajax請(qǐng)求上篇文章已經(jīng)都說(shuō)清楚了，大家應(yīng)該會(huì)感覺(jué)調(diào)用起來(lái)代碼...
    zhanghao121閱讀 295評(píng)論 0贊 0
  • 談?wù)勀銓?duì) ajax 的認(rèn)識(shí)？Ajax 的全稱是 Asynchronous JavaScript and XML 中...
    Drazy嘀嘀嘀閱讀 246評(píng)論 0贊 1
  • 好，我們接著上篇的內(nèi)容接續(xù)來(lái)講解Ajax相關(guān)的內(nèi)容。今天要將的是我們自己模仿著jQuery封裝Ajax請(qǐng)求。 原生...
    Emotion_C閱讀 358評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容