Ajax

Ajax是什么

Ajax是一种异步请求数据的web开发技术，对于改善用户的体验和页面性能很有帮助。简单地说，在不需要重新刷新页面的情况下，Ajax 通过异步请求加载后台数据，并在网页上呈现出来。常见运用场景有表单验证是否登入成功、百度搜索下拉框提示和快递单号查询等等。Ajax的目的是提高用户体验，较少网络数据的传输量。同时，由于AJAX请求获取的是数据而不是HTML文档，因此它也节省了网络带宽，让互联网用户的上网体验变得更加顺畅。

工作原理

浏览器让XHR去向服务器请求数据
浏览器接着干其他事情
XHR向服务器请求数据
服务器向XHR返回数据
XHR通知浏览器数据到了
浏览器收集返回的数据渲染页面

Ajax 的原理是基于 XMLHttpRequest 对象实现的。XMLHttpRequest 对象是 JavaScript 提供的一种 API，用于在后台与服务器交换数据。通过 XMLHttpRequest 对象，可以在不刷新整个页面的情况下，从服务器端获取数据并将其显示在页面上。XMLHttpRequest 对象可以使用 GET 或 POST 方法发送请求。GET 方法用于从服务器获取数据，POST 方法用于向服务器提交数据。

Ajax的使用

创建Ajax核心对象XMLHttpRequest

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

向服务器发送请求

xhr.open(method,url,async);  
send(string);//post请求时才使用字符串参数，否则不用带参数。

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步） 注意：post请求一定要设置请求头的格式内容

xhr.open("POST","test.html",true);  
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
xhr.send("fname=Henry&lname=Ford");  //post请求参数放在send里面，即请求体

GET与POST的区别

GET 和 POST 是两种常用的 HTTP 请求方法，它们用于向服务器请求或提交数据。它们的主要区别在于传递参数的方式、请求的语义和安全性等方面。

传递参数的方式

GET 请求是通过 URL 参数传递数据的，参数会被附加在 URL 的末尾，例如：

http://example.com?param1=value1&param2=value2

POST 请求则是通过 HTTP 消息体传递数据的，参数不会被附加在 URL 上，而是包含在请求的消息体中。

请求的语义

GET 请求是一种幂等的请求方法，意味着多次请求同一个 URL 时，服务器返回的结果应该是相同的。GET 请求通常用于获取资源，例如获取文章内容、图片等。

POST 请求则是一种非幂等的请求方法，每次请求都会对服务器产生影响。POST 请求通常用于提交数据，例如提交表单、上传文件等。

安全性

GET 请求的参数会被附加在 URL 上，容易被拦截和篡改。因此，GET 请求适用于请求非敏感数据，例如获取公开数据、搜索结果等。

POST 请求的参数则包含在请求的消息体中，相对于 GET 请求更加安全，但仍然可能被拦截和篡改。因此，POST 请求适用于提交敏感数据，例如登录信息、支付信息等。

总之，GET 和 POST 请求在使用时需要根据具体的场景来选择。如果是获取数据，使用 GET 请求；如果是提交数据，使用 POST 请求。同时，需要注意保护敏感信息的安全性，例如使用 HTTPS 协议、对数据进行加密等。

服务器响应处理

responseText 获得字符串形式的响应数据。

responseXML 获得XML 形式的响应数据。

同步处理

xhr.open("GET","info.txt",false);  
xhr.send(); document.getElementById("myDiv").innerHTML=xhr.responseText; //获取数据直接显示在页面上

异步处理

xhr.onreadystatechange=function()  { 
if (xhr.readyState==4 &&xhr.status==200)  { 
document.getElementById("myDiv").innerHTML=xhr.responseText;  
}
}

readyState

readyState是XMLHttpRequest对象的一个属性，用来标识当前XMLHttpRequest对象处于什么状态。 readyState总共有5个状态值，分别为0~4，每个值代表了不同的含义：

0：未初始化 -- 尚未调用.open()方法
1：启动 -- 已经调用.open()方法，但尚未调用.send()方法
2：发送 -- 已经调用.send()方法，但尚未接收到响应
3：接收 -- 已经接收到部分响应数据
4：完成 -- 已经接收到全部响应数据，而且已经可以在客户端使用了

status

status，即HTTP状态码，由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字没有分类的作用。HTTP状态码共分为5种类型：

分类	描述
1xx（信息性状态码）	这类状态码表示服务器已经接收到请求，但需要进一步的操作才能完成请求。
2xx（成功状态码）	这类状态码表示服务器已经成功地处理了请求。
3xx（重定向状态码）	这类状态码表示客户端需要执行额外的步骤才能完成请求。
4xx（客户端错误状态码）	这类状态码表示客户端发送了无效的请求。
5xx（服务器错误状态码）	这类状态码表示服务器在处理请求时发生了错误。

HTTP 状态码是用于描述服务器处理请求的结果的一种标准化方式。了解 HTTP 状态码的分类及其含义，可以帮助我们更好地理解 Web 应用程序的工作原理，并快速发现和解决一些常见的问题。

一些常见的状态码

200 OK：表示请求已经成功处理，并返回相应的数据。
201 Created：表示服务器已经成功创建了资源。
204 No Content：表示服务器已经成功处理了请求，但没有返回任何内容。
301 Moved Permanently：表示请求的资源已经永久移动到新的 URL 上。
302 Found：表示请求的资源已经暂时移动到新的 URL 上。
304 Not Modified：表示客户端缓存的资源仍然有效，可以直接使用缓存的数据。
400 Bad Request：表示请求无效，服务器无法理解请求。
401 Unauthorized：表示请求需要身份验证，但没有提供有效的凭据。
403 Forbidden：表示服务器拒绝了请求。
404 Not Found：表示请求的资源不存在。
500 Internal Server Error：表示服务器在处理请求时发生了内部错误。
503 Service Unavailable：表示服务器暂时无法处理请求，通常是因为服务器过载或维护。

实例

下面是一个简单的示例，用于从服务器获取数据：

var xmlhttp;
if (window.XMLHttpRequest) {
  // code for modern browsers
  xmlhttp = new XMLHttpRequest();
} else {
  // code for old IE browsers
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("myDiv").innerHTML = this.responseText;
  }
};
xmlhttp.open("GET", "mydata.txt", true);
xmlhttp.send();

在上面的代码中，我们首先创建了一个 XMLHttpRequest 对象，然后使用 open() 方法打开一个与服务器的连接，使用 send() 方法发送请求。在 readyState 变为 4 且状态码为 200 时，表示服务器已经成功地响应了请求。此时，我们可以使用 responseText 属性获取服务器返回的数据，并将其显示在页面上。

除了 GET 方法之外，还有一些其他的 HTTP 方法可以用于 Ajax。例如，POST 方法用于向服务器提交数据。在使用 POST 方法时，我们需要额外提供一个参数，即要提交的数据。下面是一个示例：

var xmlhttp;
if (window.XMLHttpRequest) {
  // code for modern browsers
  xmlhttp = new XMLHttpRequest();
} else {
  // code for old IE browsers
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("myDiv").innerHTML = this.responseText;
  }
};
xmlhttp.open("POST", "mydata.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("name=John&age=25");

在上面的代码中，我们使用 setRequestHeader() 方法设置了 Content-type，告诉服务器要提交的数据的类型。然后，我们将要提交的数据作为字符串传递给 send() 方法。

除了 GET 和 POST 方法之外，还有一些其他的 HTTP 方法可以用于 Ajax，例如 PUT、DELETE 等。使用这些方法时，需要考虑浏览器和服务器的兼容性，以及安全性等方面的问题。

除了 XMLHttpRequest 对象外，还有一些其他的工具库可以用于 Ajax 开发，例如 jQuery、axios 等。这些工具库可以简化 Ajax 的开发过程，提供更加方便的 API，以及对浏览器和服务器的兼容性进行了更加完善的处理。

Ajax | 前端学习记录