ajax知识 - 我是一枚前端小菜鸟

Ajax: Asynchronous javascript and xml (异步javascript和xml)。

Ajax并不是一种新技术,而是已有技术的集合.JavaScript是核心载体

Ajax的优势: 在不杀星页面的情况下,更新页面数据,提高用户体验

Ajax能够实现异步工作

Ajax的优势：没有页面跳转，用户体验提升。

Ajax就是在页面没有刷新或者没有跳转的情况下还能更新页面的某一部分数据

发送Ajax请求

创建XMLHTTPRequest对象: 要分为(低版本)IE 和非IE 两种方式

IE 浏览器(IE之前)

var xhr = new ActiveXOBject(‘Msxml2.XMLHTTP’)

非IE浏览器 (chrome、firefox、opare、safair、搜狗等，包括IE7+之后)

var xhr =new XMLHttpRequest()

创建XMLhttpRequest对象，兼容IE7之前和主流浏览器

 function getXhr() {
            var xmlhttp;
            if (window.XMLHttpRequest) {
                //IE7+ 和 非IE 中都有 XMLHttpRequest对象
                xmlhttp = new XMLHttpRequest();
            } else {
                xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
            }
            return xmlhttp;
        }

XMLHttpRequest对象有了,可以发送Ajax请求了 ,发送请求需要两个方法

open(request,URL,var3); 准备Ajax请求

参数:

　　request: 请求方式 get/post

　　URL: 请求的后端程序地址

　　var3: 异步(true)/同步(false)，可选参数，默认为true

send(var); 发送Ajax请求

var: 分为两种情况。如果是get请求，则填写null。如果是post请求，则填写要发送到后端的数据。

接收后端响应结果

Ajax的整个过程有5个状态,对应readyState的5个值

　　0: 创建ajax对象了

　　1: 已经调用open方法了

　　2: 已经调用send方法了

　　3: 服务器端返回了部分数据

　　4: 服务器数据返回完毕，ajax请求完毕 ---- 最重要

核心事件 ------onreadystatechange

onreadystatechange事件:readyState的值每次发生变化都会触发该事件

其他重要属性 --- responseText

以字符串形式接收后端程序的返回值。

 以PHP为例: PHP程序最终会被解释程序一段字符串，responseText接收的就是这段字符串

        xhr.onreadystatechange = function () {
            // 判断responseText的值
            if (xhr.responseText == 4) {
                // 如果等于4说明已经完成接收到返回数据,并且可以在浏览器中使用了
                // 以字符串形式接收后端的返回值
            }
            // 原生发送Ajax请求的 固定四步
            // ① 创建XMLHTTPRequest对象//1. 创建XMLHttpRequest对象
            function getXhr() {
                var xmlhttp;
                if (window.XMLHttpRequest) {
                    //IE7+ 和 非IE 中都有 XMLHttpRequest对象
                    xmlhttp = new XMLHttpRequest();
                } else {
                    xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
                }
                return xmlhttp;
            }
            var xhr = getXhr();
            // ④ onreadystatechange事件: readyState的值每次发生变化都会触发该事件。
            xhr.onreadystatechange = function () {
                //如果等于4的话，说明已经完全接收到返回数据，并且可以在浏览器中使用了，status 如果等于200 表示返回成功
                if (xhr.readyState == 4 && xhr.status == 200) {
                    //以字符串形式接收后端的返回值
                    alert('xhr.responseText') //PHP程序最终会被解析为一段字符串，responseText接收的就是这段字符串
                }
            }
            // ②准备ajax请求
            xhr.open('get', '路径');
            // ③发送ajax请求
            xhr.send(null);
        }

GET缓存

浏览器的请求需要从服务器获得许多 css、img、js 等相关的文件，如果每次请求都把相关的资源文件加载一次，对带宽、服务器资源、用户等待时间都有严重的损耗。如果浏览器将css、img、js等文件在第一次请求成功后就保存在本机上，以后的每次请求就在本机获得相关的资源文件，那么就可以明显地加快用户的访问速度，同时可以节省各种资源(带宽、服务器资源、用户等待时间)。

产生缓存的情况：Ajax在发送的数据成功后，会把请求的URL和返回的响应结果保存在缓存内，当下一次调用Ajax发送相同的请求时，它会直接从缓存中把数据取出来，这是为了提高页面的响应速度和用户体验。当前这要求两次请求URL完全相同，包括参数。这个时候，浏览器就不会与服务器交互。

Ajax方式 get会有缓存问题

解决方法

解决方法有两种:

1) 前端方案: 在open准备ajax请求时,为请求的地址增加随机后缀.相当于每次请求都是新的地址

xhr.open(‘get’,’请求的地址’ + Math.random()) //Math.random()随机

2) 后端方案: 后端程序设置不允许缓存的头信息,php程序固定使用如下3句即可

header('cache-controller:no-cache');

header('Pragam:no-cache');

header('Expires:-1');

解决缓存方案：

解决这个问题最有效的办法是禁止页面缓存，有以下几种处理方法：

1、在ajax发送请求前加上 xmlHttpRequest.setRequestHeader(“Cache-Control”,”no-cache”);

2、在服务端加 header(“Cache-Control: no-cache, must-revalidate”);

3、在ajax发送请求前加上 xmlHttpRequest.setRequestHeader(“If-Modified-Since”,”0″);

4、在 Ajax 的 URL 参数后加上 "?fresh=" + Math.random(); //当然这里参数 fresh 可以任意取了

5、第五种方法和第四种类似，在 URL 参数后加上 "?timestamp=" + new Date().getTime();

6、用POST替代GET：不推荐

不建议使用：

1、ajax不支持浏览器back按钮。

2、安全问题 AJAX暴露了与服务器交互的细节。

3、对搜索引擎的支持比较弱。

4、破坏了程序的异常机制。

5、不容易调试。

同步和异步

同步: 顺序执行(自上而下执行)

异步: 甲在完成一系列工作时,自己完成值工作.将一些分支工作交给乙,甲此时一直在完成自己的工作.并等乙完成的结果.乙将完成的结果返回给甲

同步:

同步的思想是：所有的操作都做完，才返回给用户。这样用户在线等待的时间太长，给用户一种卡死了的感觉（就是系统迁移中，点击了迁移，界面就不动了，但是程序还在执行，卡死了的感觉）。这种情况下，用户不能关闭界面，如果关闭了，即迁移程序就中断了。

异步:

将用户请求放入消息队列，并反馈给用户，系统迁移程序已经启动，你可以关闭浏览器了。然后程序再慢慢地去写入数据库去。这就是异步。但是用户没有卡死的感觉，会告诉你，你的请求系统已经响应了。你可以关闭界面了。

同步，是所有的操作都做完，才返回给用户结果。即写完数据库之后，在响应用户，用户体验不好。

异步，不用等所有操作等做完，就响应用户请求。即先响应用户请求，然后慢慢去写数据库，用户体验较好。

json

JSON: JavaScript Object Notation 是一种轻量级数据交互格式。

数据交互: 每一种语言的编码都是不一样,它们之间互不认识.但是现在的情况是不同的语言开发出的系统也需要进行数据交互,这时候就需要一个大家都人事的语言或者技术来实现

JSON 数据的声明和使用

声明 : var json_obj = {“key1”:”value1”,“key2”:”value2”}

key 必须使用双引号来包含

value: 数据-- 数值类字符串数组 json对象

JSON的本质LJSON 是JS 对象的字符串表示法,它使用文本表示一个JS对象的信息,本质是一个字符串

PHP数组转JSON格式的字符串’’

php提供了函数: json_str = json_encode($arr)

只要使用了echo进行输出,那么输出的内容就一定是字符串

$arr = [’aaa’,’bbb’,’cccc’];

echo json_encode($arr)

JSON字符串转JSON对象 -----JavaScript代码

前端的ajax请求，最后接收到的都是字符串 --- responseText，以字符串形式接收后端返回的数据

var a ='[{"id":10001,"name":"zs","age":20},{"id":10002,"name":"ls","age":21},{"id":10003,"name":"ww","age":19}]'

json格式的字符串转为json对象: JSON.parse(json_str);

参数: json格式的字符串

可以认为,JSON.parse就是将字符串前后的单引号去掉了

var json_str = ‘{“name”:”张三”,”age”:20}’;

// 将JSON格式的字符串转为json格式的js对象

var json_obj = JSON.parse(json_str)

console.log(json_obj)

输出结果

json对象转为json格式的字符串: JSON.stringify(json_obj);参数: json对象

可以简单粗暴的理解为给 json对象增加了单引号

var json_obj = {“name”:”张三”,”age”:20};

var json_str = JSON.stringify(json_obj);

console.log(json_obj)

输出结果

(这是在网页的输出结果)

常见模板地址

ArtTemplate：https://github.com/aui/artTemplate

velocity.js：https://github.com/shepherdwind/velocity.js

Handlebars：http://handlebarsjs.com

发表于 2019-09-19 15:49 我是一枚前端小菜鸟阅读(151) 评论(0) 收藏举报