【建站系列教程】3.2、ajax使用精讲

【建站系列教程】3.2、ajax介绍

ajax的应用场景
- 1、form表单实现无跳转提交
- 2、ajax局部刷新代替刷新网页
ajax的通俗介绍
ajax的基本用法
ajax的ES写法

写在前面：大家好，我是热爱编程的小泽。
【建站系列教程】是我的亲身建站经历写给广大建站同胞们的教学博客。
喜欢的话点个赞吧~ 评论区欢迎交流讨论~

ajax仍然是站长必会的一个知识，但是在我看来，ajax还是有很多安全性的问题，安全性问题，我会在下一篇博客进行总结。

ajax的应用场景

1、form表单实现无跳转提交

一般情况下，form表单的语法为：

 <form action='server.php' methon='POST'><input ……<button type='submit'>submit</button></form>

每当点击按钮submit之后，本页面会跳转到server.php页面，由server.php文件处理数据，之后再由server.php文件里面的代码执行跳转到原来页面。
因为每次提交都会跳转到php文件，然后再跳转回来很影响体验。所以现在提出一个需求，点击按钮，不跳转执行php文件。

ajax能实现。

2、ajax局部刷新代替刷新网页

很多时候，一些更改之后的数据都是需要用户刷新之后才能显示，现在可以实现在网页里面局部刷新。

ajax能实现。

ajax的通俗介绍

ajax全称是Asynchronous JavaScript And XML，让数据在后台进行异步传输。再通俗一点地说，我们可以使用js的ajax技术直接请求服务器上的内容，而不是必须使用php等后端语言。
需要注意的是，ajax有js原生版本的，也有jquery版本的，还有其他版本。ajax只是对浏览器js脚本的XMLHttpRequest 对象 (异步的与服务器交换数据)等的封装，并不是新的技术。

ajax的基本用法

这里推荐jq的ajax，用习惯了。只要js标签引入了jq就能使用jq的ajax。
给出最常用的写法：

 $.ajax({ url: "http://www.xxx.com/xxx",  //请求的urlcontentType:'json',data:{account:'123',password:'123'},success: function(data){console.log(data);//data为服务器返回的数据},error:function(){}});

下面给出我总结的ajax比较常用的参数：血泪史！debug几年的心得

实用参数一	描述
async	类型：布尔型默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。

【注】：参数async涉及到一个知识点。我们一般是在ajax的success回调函数中拿数据。但是如果我们要是在ajax之外使用数据，那么就会报错。见下图一：

控制台输出结果为：

0
2

【原因】：在一个代码块中（上图的getInfor函数），ajax的success回调函数是最后最后执行的。所以在最下面的console.log(infor)是拿不到data数据的，只能在success回调函数中来使用数据。

那么如何解决这一问题？

这个时候，就需要用到参数async。把async设置为true，改为同步，这样在ajax外也能拿到success回调函数的数据了。

实用参数二	描述
dataType	“xml”: 返回 XML 文档 "html": 返回纯文本 HTML 信息 "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache” 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载） “json”: 返回 JSON 数据。 “jsonp”: JSONP 格式 "text": 返回纯文本字符串

实用参数二

描述

dataType

“xml”: 返回 XML 文档
"html": 返回纯文本 HTML 信息
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache” 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
“json”: 返回 JSON 数据。
“jsonp”: JSONP 格式
"text": 返回纯文本字符串

【注】：dataType也是常用的参数。其中，json、jsonp、xml最为常用，至于如何解析json和xml格式的数据，大家可以翻一下我的博客，里面有。这里也有一个特别重要的点！！

跨域解决方案之一。

有时候，用json格式去请求api，总是报跨域的错，这个时候把json改成jsonp，立马解决。

实用参数三四五	描述
type	类型：String 默认值: “GET”。可选值有：GET、PUT、POST、DALETE
error	类型：Function 失败的回调函数
success	类型：Function 成功的回调函数，用于拿服务器返回的数据。

ajax的ES写法

介绍一下ajax的ES6的写法，用来装13……
给出最常用的写法：

 $.ajax({ url: "http://www.xxx.com/xxx",  //请求的urlcontentType:'json',data:{account:'123',password:'123'},success: (data)=>{console.log(data);//data为服务器返回的数据},error:()=>{}});