如何用简洁的话说明ajax,Ajax的简单介绍

初步认识Ajax

Ajax的简单介绍

由于之前学的都是纯前端的一些界面设计，最近想通过与服务端交互，向前端传输数据从而进行渲染，简单了解了一下Ajax技术。

Ajax是什么

Ajax并不是一种新的语言，而是一种新的方法，Ajax是允许客户端与服务端通信而无需刷新当前页面的一种技术。

首先比较一下传统的web模型与Ajax模型，两者的区别：

web模型 ：客户端向服务端发送请求时，服务端会发送整个页面；

Ajax模型： 数据在客户端与服务端之间独立传输，服务端不再向客户端发送整个页面；

XMLHttpRequest对象(XMLHttpRequest对象是Ajax的基础)：

该对象可以实现由客户端向服务端发送请求，而客户端不用向客户端发送整个页面，实现了客户端与服务端的异步通信。如何通过该对象实现客户端与服务端的异步交互呢？

发送请求：包含三个关键部分：

1.onreadystatechange事件处理函数：该函数由服务器触发，而不是由用户触发。在Ajax执行过程中，服务端会向用户端发送当前的状态(通过XMLHttpRequest对象的ReadyState属性)。在请求过程中，该函数会被触发4次。

2.open方法：建立请求open(method,url,asynch)。规定请求的内容，方法和是否异步传输。

3.send方法：将请求发送到服务器。

接收响应：

1.readyState:存储XMLHttpRequest的状态值(0-4).0：请求未初始化，1：服务器已建立连接，2.请求已接收，3.请求处理中，4.请求已完成，且相应已就绪。当readyState的值发生改变时，会调用onreadystatechange函数。

2.status:在XMLHttpRequest对象中，服务器发送的状态码都被保存在status属性中。通过将这个属性值与200和304比较，确保服务器是否发送了一个成功的响应。404：没找到界面，403.禁止访问，500.内部服务器错误，200.一切正常，304.没有被修改。

3.responseText:服务器向客户端发送的文件，它是一个HTML，XML或普通文本，这取决与服务器发送的内容，当readyState状态值变为4时，responseText才可用，表明Ajax请求已结束。

4.responseXML:如果服务器返回的是XML文件，那么数据将存储在responseXML属性中，只有服务器发送了正确的首部地址的信息时，responseXML属性才可用。

下面通过代码演示一下，如何通过Ajax实现客户端与服务端的传输

通过Ajax技术，实现点击HelloAjax，通过向服务端发送请求，返回test.txt文件,弹出test.txt文件中的内容Hello Ajax!，该html代码为

Ajax

window.onload = function () {

alert("aaa");

//获取a元素，点击事件

document.getElementsByTagName("a")[0].onclick = function () {

alert("bbb");

//新建XMLHttpResponse对象

var request = new XMLHttpRequest();

//规定请求的内容

var url = this.href;

//规定请求的方法

var methods = "GET";

//建立请求

request.open(methods,url);

//发送

request.send(null);

//服务器触发函数

request.onreadystatechange = function () {

//当状态值为4时，说明此时请求已完成

if (request.readyState == 4){

if (request.status ==200||request.status == 304){

alert(request.responseText);

}

}

}

return false;

}

}

HelloAjax

该txt文件为

Hello Ajax!

生成一个适合你的列表

项目

项目

项目

项目1

项目2

项目3

计划任务

完成任务

创建一个表格

一个简单的表格是这么创建的：

项目

Value

电脑

$1600

手机

$12

导管

$1

设定内容居中、居左、居右

使用:---------:居中

使用:----------居左

使用----------:居右

第一列

第二列

第三列

第一列文本居中

第二列文本居右

第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE

ASCII

HTML

Single backticks

'Isn't this fun?'

‘Isn’t this fun?’

Quotes

"Isn't this fun?"

“Isn’t this fun?”

Dashes

-- is en-dash, --- is em-dash

– is en-dash, — is em-dash

创建一个自定义列表

Markdown

Text-to-HTML conversion tool

Authors

John

Luke

如何创建一个注脚

一个具有注脚的文本。

注释也是必不可少的

Markdown将文本转换为 HTML。

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 Γ(n)=(n−1)!∀n∈N\Gamma(n) = (n-1)!\quad\forall

n\in\mathbb NΓ(n)=(n−1)!∀n∈N 是通过欧拉积分

Γ(z)=∫0∞tz−1e−tdt .\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.Γ(z)=∫0∞​tz−1e−tdt.

你可以找到更多关于的信息 LaTeX 数学表达式here.

新的甘特图功能，丰富你的文章

Mon 06Mon 13Mon 20已完成进行中计划一计划二现有任务Adding GANTT diagram functionality to mermaid

关于 甘特图 语法，参考 这儿,

UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：:

张三李四王五你好！李四, 最近怎么样?你最近怎么样，王五？我很好，谢谢!我很好，谢谢!李四想了很长时间,文字太长了不适合放在一行.打量着王五...很好... 王五, 你怎么样?张三李四王五

这将产生一个流程图。:

链接长方形圆圆角长方形菱形

关于 Mermaid 语法，参考 这儿,

FLowchart流程图

我们依旧会支持flowchart的流程图：

Created with Raphaël 2.2.0开始我的操作确认？结束yesno

关于 Flowchart流程图 语法，参考 这儿.

导出与导入

导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。

导入

如果你想加载一篇你写过的.md文件或者.html文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，

继续你的创作。

注脚的解释 ↩︎

标签：XMLHttpRequest,请求,request,介绍,Ajax,简单,服务端,客户端

来源： https://blog.csdn.net/weixin_44015821/article/details/91892236