前言:
要学习一门新的、技术之前,首先我们要了解一下他是什么,为什么使用,有什么好处,该怎么理解。现在就从下文开始了解吧
什么是ajax:
Ajax即“Asynchronous Javascript And XML”(异步JavaScript 和XML),是指一种创建交互式网页应用的的网页开发技术。是一种用于提高浏览器和服务器交互效率的快速创建动态网页技术。能够替换传统传统的web交互模式。Ajax=异步JavaScript和XML(标准通用标记语言的子集)。通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新(无刷新技术)。传统的网页(不使用Ajax)如果需要更新内容,必须重载整个网页页面。
为什么使用ajax
应用程序的大多数处理在用户的浏览器中发生,而且对服务器的数据请求往往很短。所以可以使用Ajax建立功能丰富的应用程序,这些应用程序依赖基于web的数据,但是其性能远远超过老式的,因为老式方法要求服务器传回整个HTML页面来响应用户操作
无刷新:不刷新整个页面,只刷新局部
无刷新的好处:
1、只更新部分页面,有效利用带宽
2、提供连续的用户体验
3、提供类似c/s的交互效果,操作更方便
如何理解这个同步异步?
传统同步交互模式是怎样的?
?在传统模型中,使用的是同步交互模式,客户端浏览器向服务器提出请求,然后在服务器响应这个请求之前,一直处于等待的状态,并且不能进行别的操作。
主流技术异步交互模式是怎样的?
?在Ajax异步交互模式中,在客户端浏览器和服务器当中,多了一个传递对象Ajax引擎,当客户端浏览器是向Ajax引擎提交请求,然后由Ajax引擎负责和服务器进行请求信息转交,这样就能实现在客户端浏览器发送请求后,能够继续操作,而不是处于等待状态。当服务器处理完Ajax引擎请求后,将响应传递给Ajax引擎,Ajax引擎会更新客户端浏览器页面。
下面是ajax请求的简单示例
AJAX(Asynchronous JavaScript and XML)是一种用于创建交互式网页应用程序的技术。它允许在不重新加载整个页面的情况下,通过异步方式与服务器进行通信,从而实现动态更新页面内容的效果。
以下是一个基本的AJAX请求的示例代码:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// 当请求完成且响应状态码为200时,执行以下代码
console.log(this.responseText); // 打印响应内容
}
};
xhttp.open("GET", "example.com/api/data", true); // 设置请求方法、URL和是否异步
xhttp.send(); // 发送请求
上述代码中,我们创建了一个XMLHttpRequest对象,通过设置其onreadystatechange属性来监听请求状态的变化。当请求状态变为4(即请求完成)且响应状态码为200时,我们可以通过responseText属性获取到服务器返回的响应内容。
需要注意的是,AJAX请求需要满足两个前提条件才能成功获取到响应:一是HTTP请求的状态码为200~299,表示请求成功;二是AJAX对象自身的状态码也需要正确,用来表示请求的各个阶段。12