当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 荐 AJAX初识Day1——POST & GET请求

荐 AJAX初识Day1——POST & GET请求

2020年07月12日  | 移动技术网IT编程  | 我要评论

AJAX

1. 简介

AJAX（Asynchronous JavaScript and XML ），最早出现在 05 年的 google ，是让浏览器端进行网络编程的技术方法，它使我们可以通过 Javascript 直接获取服务端最新的内容而不必重新加载页面。

  • 涉及到 AJAX 操作的页面不能使用文件协议访问（文件形式访问file:…）
    • 某些情况可以 （少）
  • AJAX 是一套 API 核心提供的类型：XMLHttpRequest

2.快速上手

  • 此图常问(了解) 手写:
// 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)
    }
}

1. 1readyState

readyState 状态描述 说明
0 UNSENT 代理（XHR）被创建，但尚未调用 open() 方法
1 OPENED open() 方法已经被调用，建立了连接
2 HEADERS_RECEIVED send()方法已经被调用，并且已经可以获取状态行和响应体
3 LOADING 响应体下载中，responseText 属性可能
4 DONE 响应体下载完成，可以自己使用 responseText

在这里插入图片描述

3.具体用法

3.1 GET请求

通常在一次 GET 请求过程中没参数传递都是通过 URL 地址中的 ？ 参数传递

        var xhr = new XMLHttpRequest()

        // GET 请求传递参数通常使用的是问好传参
        // 这里可以在请求地址后面加上参数，从而传递数据到服务端
        xhr.open('GET', './user.php?id=1')

        // 一般在 GET 请求时无需设置响应体，可以传 null 或者干脆不传
        xhr.send(null)

        xhr.addEventListener('readystate', () => {
            if (this.readyState != 4) return;
            console.log(this.responseText);
        })

        // 一般情况下， URL 传递的都是参数性质的数据，而 POST 一般都是业务数据

3.2 POST 请求

POST 请求中，都是采用请求体承载需要提高的 数据

var xhr = new XMLHttpRequest() // open 方法的第一个参数的作用就是设置请求的 method 

xhr.open('POST', './add.php') // 设置请求头中的 Content‐Type 为 application/x‐www‐form‐urlencoded // 标识此次请求的请求体格式为 urlencoded 以便于服务端接收数据 

xhr.setRequestHeader('Content‐Type', 'application/x‐www‐form‐urlencoded') // 需要提交到服务端的数据可以通过 send 方法的参数传递 // 格式：key1=value1&key2=value2 
xhr.send('key1=value1&key2=value2') 
xhr.onreadystatechange = function () {   
    if (this.readyState === 4) {
        console.log(this.responseText)
    } 
}

3.3 同步模式和异步模式

关于同步和异步的概念在生活有很多例子：

同步：做饭的时候，等水开了再切菜

异步：做饭的时候，在烧水的同时去切菜，而不是等待

xhr.open() 方法第三个参数要求传入的是一个 bool 值，其作用就是设置此次请求是否采用异步方式执行

默认为 ture ，如果需要同步执行可以通过 false 参数实现。

   <script>
        console.time('异步');
        var xhr = new XMLHttpRequest();

        // open 方法第三个参数是 async  可以传入一个布尔值 默认为 true 默认采用异步模式
        xhr.open('GET', './time.php', true);

        xhr.send();//期间的计时阻塞就发生在send（）方法

        console.timeEnd('异步');

        console.time('同步');
        var _xhr = new XMLHttpRequest();

        // open 方法第三个参数是 async  可以传入一个布尔值 默认为 true 默认采用异步模式
        _xhr.open('GET', './time.php', false);
        _xhr.send();
        console.timeEnd('同步');
    </script>

结果：(时间不一定) —> 期间的计时阻塞就发生在send（）方法

  • 正常网络：
    • 异步: 0.808837890625ms
    • 同步: 8.543212890625ms
  • 3G 下：
    • 异步：0.427978515625ms
    • 同步：4045.179931640625ms

console.time(’ name ‘) & console.timeEnd(’ name ')

开启计时器

3.4 相应数据格式

提问：如果希望服务端返回一个复杂数据。该如何处理?

关心的问题就是服务端发出何种格式的数据，这种格式如何在客户端用 javascript 解析

不管服务器是采用 xml 还是采用 json 本质上收拾将数据返回给客户端

服务端应该设置一个合理的 Content-Type

3.4.1 XML

一种数据描述手段

老掉牙的东西，写起来复杂，基本现在的项目不用了

数据冗余过多

3.4.2 JSON

类似于 javascript 字面量方式

服务端采用 JSON 格式返回数据，客户端安装 JSON 格式解析数据。

不管是 JSON 也好，还是 XML ，只是再 AJAX 请求过程中用到，并不代表它们之间有必然的联系，它们只是数据协议罢了

3.5 处理响应数据渲染

模板引擎：

  • artTemplate: http://aui.github.io/art-template/

3.6 兼容方案()

XMLHttpRequest 在老版本浏览器（i5 和 i6）有兼容问题，可以通过另外一种方式代替

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

4.封装

4.1 AJAX 请求封装

函数就可以理解为一个想要做的事情，函数体中约定了这件事情做的过程，直到调用才开始工作

将函数作为参数传递就像是将一个事情交给别人，这就是委托的概念

5.进程与线程

5.1 进程

  • 进(运)行中的程序

5.2 线程

  • 照着代码 做已经设计好的程序 进行工作

5.3 多线程

  • 一个演员演一个角色，要切换角色的时候，瞬间化妆再去演另一个角色…重复(累)

此笔记有两天，明天更完更 Vue…

本文地址：https://blog.csdn.net/weixin_46313446/article/details/107268033

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网