认识AJAX技术-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_35370002/article/details/116673262

AJAX

认识ajax😴

AJAX全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

ajax工作原理

在这里插入图片描述

使用ajax🔧

使用ajax可以分为5个步骤

1. 创建HTTP代理

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

	let xhr = new XMLHttpRequest ();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象

	let xhr = new ActiveXObject("Microsoft.XMLHTTP");

兼容性写法

var xhr;
if (window.XMLHttpRequest){
	// code for IE7+, Firefox, Chrome, Opera, Safari
 	xhr=new XMLHttpRequest();
}
else{
	// code for IE6, IE5
 	xhr=new ActiveXObject("Microsoft.XMLHTTP")
}

2. 建立服务器连接

xhr.open(method,url,async)

method：ajax请求方式（GET/POST）
url：请求的文件在服务器上的位置
async：true（异步）或 false（同步），默认为异步

示例

	//调用免费的每日笑话接口
	xhr.open('GET','https://autumnfish.cn/api/joke');

注意📢
仅当使用GET请求时，如果需要传输数据，需拼接在url后面，多条数据需要用&分隔

	xhr.open('GET','https://test?id=321&age=23');

3.设置请求头

	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

注意📢
仅当POST请求时，必须设置请求头

4. 发送请求

xhr.send()

注意📢
使用GET时，无需传入参数；使用POST请求时，如果需要传输数据，则将数据放入send中发送，

	//POST请求时
	xhr.send('name=John&age=32')

5.接受返回的数据

xhr.onreadystatechange = function() {
  //readyState 存有服务器响应的状态信息;status服务器响应状态
  if (xhr.readyState == 4 && (xhr.status == 200)) {
  	//获取响应的数据，以字符串形式打印
    consolelog(xhr.responseText);
  }
};

readyState有5中状态分别为

0: 请求未初始化（代理被创建，但尚未调用 open() 方法）
1: 服务器连接已建立（open方法已经被调用）
2: 请求已接收（send方法已经被调用，并且头部和状态已经可获得）
3: 请求处理中（下载中，responseText 属性已经包含部分数据）
4: 请求已完成，且响应已就绪（下载操作已完成）

封装📦

var Ajax={
  get: function(url, fn) {
    // XMLHttpRequest对象用于在后台与服务器交换数据   
    var xhr = new XMLHttpRequest();            
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
      // readyState == 4说明请求已完成
      if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { 
        // 从服务器获得数据 
        fn.call(this, xhr.responseText);  
      }
    };
    xhr.send();
  },
  // datat应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
  post: function (url, data, fn) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    // 添加http头，发送信息至服务器时内容编码类型
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
        fn.call(this, xhr.responseText);
      }
    };
    xhr.send(data);
  }
}

AJAX优缺点

优点

最大的优点就是页面无需刷新，在页面内与服务器通信，非常好的用户体验。
使用异步的方式与服务器通信，不需要中断操作。
可以把以前服务器负担的工作转嫁给客户端，减轻服务器和带宽，可以最大程度减少冗余请求。
基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

缺点

AJAX干掉了Back和History功能，即对浏览器机制的破坏。

在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。
安全问题技术同时也对IT企业带来了新的安全威胁。

ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。
对搜索引擎的支持比较弱。

通常搜索引擎都是通过爬虫的方式对网络上数据亿计的数据进行搜索和整理的，但是目前爬虫程序还不理解那些奇怪的javaScript有时造成页面混乱。如果一个站点是通过ajax技术，那么在推广时会相比传统模式会处于劣势。
开发和调试工具缺乏。

ajax技术中的重要组成部分是javaScript，但是目前却是缺少javaScript良好的调试工具。很多web开发人员对javaScript望而生畏。