初步认识Ajax
Ajax的简单介绍
由于之前学的都是纯前端的一些界面设计，最近想通过与服务端交互，向前端传输数据从而进行渲染，简单了解了一下Ajax技术。
Ajax是什么
Ajax并不是一种新的语言，而是一种新的方法，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代码为
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Ajax</title>
<script>
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;
}
}
</script>
</head>
<body>
<a href="test.txt">HelloAjax</a>
</body>
</html>
该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 是通过欧拉积分
Γ(z)=∫0∞tz−1e−tdt.
你可以找到更多关于的信息 LaTeX 数学表达式here.
新的甘特图功能，丰富你的文章
- 关于 甘特图 语法，参考 这儿,
UML 图表
可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：:
这将产生一个流程图。:
- 关于 Mermaid 语法，参考 这儿,
FLowchart流程图
我们依旧会支持flowchart的流程图：
- 关于 Flowchart流程图 语法，参考 这儿.
导出与导入
导出
如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。
导入
如果你想加载一篇你写过的.md文件或者.html文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。
注脚的解释 ↩︎
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
