Ajax学习笔记

wing324 发布于2019-08-02 12:14 / 1750人阅读

摘要：最近在学，刚刚入门，用到很多与相关的交互。也用了挺久的了，想写一下学习笔记来记录一下。实现过程是的基础，是核心对象，首先要实例化一个对象进行请求，规定请求的类型以及是否异步处理请求。响应服务器状态响应服务器状态涉及对象的三个重要的属性。

</>复制代码 
最近在学php，刚刚入门，用到很多与Ajax相关的交互。Ajax也用了挺久的了，想写一下学习笔记来记录一下。今天先简单写一下原理和过程。欢迎大家一起探讨。

什么是AJAX

AJAX的全称是Asynchronous JavaScript and XML。
它是一种基于JavaScript的网页应用技术。传统的提交方式会重载整个网页，而利用AJAX技术可以使JavaScript与Web服务器异步传输数据，从而实现不重载整个页面的情况下，更新局部页面局部内容。

Ajax实现过程 0. XMLHttpRequest是AJAX的基础，XMLHTTPRequest()是核心对象，首先要实例化一个XMLHTTPRequest()对象

</>复制代码 
var xhr = new XMLHTTPRequest();

1. AJAX进行请求，规定请求的类型、URL 以及是否异步处理请求。

</>复制代码 
xhr.open(method, url, async);

open()方法接收三个参数：

method：请求的类型；GET 或 POST

url：文件在服务器上的位置

async：true（异步）或 false（同步）

AJAX的原理就是Asynchronous异步的，所以第三个参数async为true。

第一个参数method决定了请求类型，即传输数据的方式。

GET

与POST相比，GET 更简单也更快。但是传输数据时会将数据放在地址栏的后面，对客户端而言不安全。除此之外，GET传输数据的大小受限，一般只有2k-8k，因浏览器而异。所以在传输不敏感信息并且传输文件小的情况下，我们可以选择用GET方式传输。

POST

POST传输是传输数据体，是隐式的，相对客户端较为安全。但是从另一层面上来说，相对服务器端就有一定的风险了。POST传输数据没有大小限制，但是服务器对上传的数据有限制，需要手动修改。

2. AJAX向服务器发送请求

</>复制代码 
xhr.send(string);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

用GET方法传输时，send(null)，用POST方法传输时，需要用setRequestHeader方法设置请求头。

3. AJAX响应服务器状态

AJAX响应服务器状态涉及XMLHttpRequest对象的三个重要的属性：onreadystatechange、readyState、status。
readyState存有XMLHttpRequest的状态。从0到4发生变化：

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

每当readyState改变时，就会触发onreadystatechange事件，在事件中判断请求是否成功，响应是否就绪，当readyState等于4且状态为200时，表示响应已就绪：

</>复制代码 
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            obj.success(xhr.responseText);
        }
    }
}

4. 使用 Callback 函数

</>复制代码 
obj.success(xhr.responseText);

AJAX响应就绪后，对接收到的数据进行后续的操作。

Ajax原生封装

</>复制代码 
var ajax = {
    create: function () {
        var xhr;
        if (XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else{
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xhr;
    },
    request: function (obj) {
        var xhr = this.create();
        var data = this.changeData(obj.data);
        if (obj.type === "GET") {
            xhr.open(obj.type, obj.url+"?rand="+Math.random()+"&"+data, true);
            xhr.send(null);
        } else if (obj.type === "POST") {
            xhr.open(obj.type, obj.url, true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
            xhr.send(data);
        }
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    obj.success(xhr.responseText);
                }
            }
        }
    },
    changeData: function (data) {
        var arr = [];
        for (var i in data) {
            arr.push(i+"="+data[i]);
        }
        return arr.join("&");
    }
}
// 调用
ajax.request({
    type: "POST",
    url: "weibo.php",
    data: "act=update",
    success: function(res){
        console.log(res);
    }
});

可以看出调用的形式与jQuery的实现原理相似。

GPU云服务器云服务器学习笔记学习笔记一基础学习笔记深度学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53430.html

Ajax学习笔记

摘要：最近在学，刚刚入门，用到很多与相关的交互。也用了挺久的了，想写一下学习笔记来记录一下。实现过程是的基础，是核心对象，首先要实例化一个对象进行请求，规定请求的类型以及是否异步处理请求。响应服务器状态响应服务器状态涉及对象的三个重要的属性。最近在学php，刚刚入门，用到很多与Ajax相关的交互。Ajax也用了挺久的了，想写一下学习笔记来记录一下。今天先简单写一下原理和过程。欢迎大家一起探...

Forest10 2019-08-23 14:01 评论0 收藏0
Laravel学习笔记之Demo2——用Ajax来做个ToDoList(待更新)

摘要：抱歉，最近忙，本篇等有时间更新。引言本文基于框架做的一个生成和存储，主要目的是学习使用框架。书籍基于的，学习时使用框架开发。开发环境备注一直想把这本书的个作为系列分享出来，供初学者学习玩玩。抱歉，最近忙，本篇等有时间更新。引言本文基于Laravel框架做的一个URL生成和存储demo，主要目的是学习使用Laravel框架。内容基于英文书籍《Packt.Laravel.Applic...

luck 2019-06-27 14:08 评论0 收藏0
网易微专业之《前端开发工程师》学习笔记（1）

摘要：点击此处了解网易微专业课程前段时间报名参加了网易云课堂微专业课程前端开发工程师，这周课程开始了，正式学习。以下内容为前端开发工程师微专业的第一门课网页制作的课程学习指南，学习视频课程后自己整理的学习笔记，会持续更新内容。何为网易微专业？微专业是由网易云课堂联合各领域知名专家，以就业为导向，精心打造的职业培训方案。按要求完成学习，考试通过可获得专业认定证书，令你求职或加薪多一份独特优...

geekzhou 2019-08-28 18:28 评论0 收藏0
网易微专业之《前端开发工程师》学习笔记（1）

摘要：点击此处了解网易微专业课程前段时间报名参加了网易云课堂微专业课程前端开发工程师，这周课程开始了，正式学习。以下内容为前端开发工程师微专业的第一门课网页制作的课程学习指南，学习视频课程后自己整理的学习笔记，会持续更新内容。何为网易微专业？微专业是由网易云课堂联合各领域知名专家，以就业为导向，精心打造的职业培训方案。按要求完成学习，考试通过可获得专业认定证书，令你求职或加薪多一份独特优...

刘东 2019-08-01 15:00 评论0 收藏0
ajax学习笔记

摘要：对象是的基础使用它的和方法将请求发送到服务器或，请求的类型文件在服务器上的位置为异步，为同步将数据发送给服务器，仅用于方法当设为时，即为异步时，规定响应处于事件中的就绪函数的三个重要属性每次发生改变时就会调用这个函数存储着的状态，从到发生变 XMLHttpRequest对象是ajax的基础使用它的open()和send()方法将请求发送到服务器 var a=3; var requ...

LeviDing 2019-08-20 14:29 评论0 收藏0