diff --git a/05-JavaScript基础：异步编程和Ajax/02-Ajax入门和发送http请求.md b/05-JavaScript基础：异步编程和Ajax/02-Ajax入门和发送http请求.md index 422b01c..f8206ae 100644 --- a/05-JavaScript基础：异步编程和Ajax/02-Ajax入门和发送http请求.md +++ b/05-JavaScript基础：异步编程和Ajax/02-Ajax入门和发送http请求.md @@ -1,19 +1,16 @@ - - ## 同步和异步回顾 ### 同步和异步的简单理解 +- 同步：必须等待前面的任务完成，才能继续后面的任务。 -- 同步：必须等待前面的任务完成，才能继续后面的任务。 - -- 异步：不受当前任务的影响。 +- 异步：不受当前任务的影响。 拿排队举例： -- 同步：在银行排队时，只有等到你了，才能够去处理业务。 +- 同步：在银行排队时，只有等到你了，才能够去处理业务。 -- 异步：在排队的时候，可以玩手机。 +- 异步：在排队的时候，可以玩手机。 ### 异步更新网站 @@ -23,11 +20,9 @@ 试想一下，如果没有异步刷新的话，每次点击“加载更多”，网页都要重新刷新，体验就太糟糕了。 -web前端里的异步更新，就要用到 Ajax。很多人说，如果没有 Ajax，就没有互联网的今天。 - -关于同步和异步的更详细介绍，可以参考本项目的另外一篇文章：《05-JavaScript基础：异步编程和Ajax/01-单线程和异步》 - +web 前端里的异步更新，就要用到 Ajax。很多人说，如果没有 Ajax，就没有互联网的今天。 +关于同步和异步的更详细介绍，可以参考本项目的另外一篇文章：《05-JavaScript 基础：异步编程和 Ajax/01-单线程和异步》 ## Ajax @@ -37,80 +32,127 @@ web前端里的异步更新，就要用到 Ajax。很多人说，如果没有 Aj Ajax：Asynchronous Javascript And XML（异步 JavaScript 和 XML）。它并不是凭空出现的新技术，而是对于现有技术的结合。Ajax 的核心是 js 对象：**XMLHttpRequest**。 -### Ajax原理（发送 Ajax 请求的五个步骤） +### Ajax 原理（发送 Ajax 请求的五个步骤） > 其实也就是 使用 XMLHttpRequest 对象的五个步骤。 -我们先回忆一下，一个完整的HTTP请求需要的是： +我们先回忆一下，一个完整的 HTTP 请求需要的是： -- 请求的网址、请求方法get/post。 +- 请求的网址、请求方法 get/post。 -- 提交请求的内容数据、请求主体等。 +- 提交请求的内容数据、请求主体等。 -- 接收响应回来的内容。 +- 接收响应回来的内容。 发送 Ajax 请求的五个步骤： （1）创建异步对象，即 XMLHttpRequest 对象。 -（2）使用open方法设置请求参数。`open(method, url, async)`。参数解释：请求的方法、请求的url、是否异步。 +（2）使用 open 方法设置请求参数。`open(method, url, async)`。参数解释：请求的方法、请求的 url、是否异步。第三个参数如果不写，则默认为 true。 （3）发送请求：`send()`。 -（4）注册事件：注册onreadystatechange事件，状态改变时就会调用。 +（4）注册事件：注册 onreadystatechange 事件，状态改变时就会调用。 如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。 （5）服务端响应，获取返回的数据。 -### Ajax 请求：get 请求举例 +## 手写 Ajax + +### 手写第一个 Ajax 请求 + +get 请求： + +```js +//【发送ajax请求需要五步】 +//（1）创建XMLHttpRequest对象 +var xmlhttp = new XMLHttpRequest(); + +//（2）设置请求的参数。包括：请求的方法、请求的url。 +xmlhttp.open('get', '02-ajax.php'); + +//（3）发送请求 +xmlhttp.send(); + +//（4）注册事件。 onreadystatechange事件，状态改变时就会调用。 +//如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。 +xmlhttp.onreadystatechange = function () { + // 为了保证 数据 完整返回，我们一般会判断 两个值 + if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { + // 如果能够进入这个判断，说明数据请求成功了 + //（5）服务端相应：在注册的事件中，获取返回的内容，并显示在页面上 + console.log('数据返回成功'); + + // 数据是保存在 异步对象的 属性中 + console.log(JSON.stringify(xmlhttp.responseText)); + } +}; +``` + +post 请求： + +```js +//（1）异步对象 +var xmlhttp = new XMLHttpRequest(); + +//（2）设置请求参数。包括：请求的方法、请求的url。 +xmlhttp.open('post', '02.post.php'); + +// 如果想要使用post提交数据,必须添加此行 +xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); + +//（3）发送请求 +xmlhttp.send('name=fox&age=18'); + +//（4）注册事件 +xmlhttp.onreadystatechange = function () { + //（5）服务端相应 + if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { + alert(xmlhttp.responseText); + } +}; +``` + +### 封装Ajax请求（重要） + +todo + +## Ajax 请求举例 + +### Ajax 请求：get 请求举例 （1）index.html： ```html - - - Document - - -

Ajax 发送 get 请求

- + + + Document + + +

Ajax 发送 get 请求

+ - - + + ``` @@ -133,36 +175,28 @@ index.html： ```html - - - Document - - -

Ajax 发送 get 请求

- - - + + + Document + + +

Ajax 发送 get 请求

+ + + ``` @@ -175,33 +209,33 @@ index.html： 发送请求的方法： ```javascript - open(method, url, async); +open(method, url, async); ``` 参数解释： -- method：请求的类型；GET 或 POST +- method：请求的类型；GET 或 POST -- url：文件在服务器上的位置 +- url：文件在服务器上的位置 -- async：true（异步）或 false（同步） +- async：true（异步）或 false（同步） 另外还有个方法：（仅用于 POST 请求） ```javascript - send(string); +send(string); ``` -### POST请求时注意 +### POST 请求时注意 -如果想让 像form 表单提交数据那样使用POST请求，就需要使用 XMLHttpRequest 对象的 setRequestHeader()方法 来添加 HTTP 头。然后在 send() 方法中添加想要发送的数据： +如果想让 像 form 表单提交数据那样使用 POST 请求，就需要使用 XMLHttpRequest 对象的 setRequestHeader()方法 来添加 HTTP 头。然后在 send() 方法中添加想要发送的数据： ```javascript - xmlhttp.open("POST","ajax_test.php", true); +xmlhttp.open('POST', 'ajax_test.php', true); - xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); +xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); - xmlhttp.send("name=smyhvae&age=27"); +xmlhttp.send('name=smyhvae&age=27'); ``` ### onreadystatechange 事件 @@ -210,424 +244,86 @@ index.html： readyState：（存有 XMLHttpRequest 的状态。从 0 到 4 发生变化） -- 0: 请求未初始化 +- 0: 请求未初始化 -- 1: 服务器连接已建立 +- 1: 服务器连接已建立 -- 2: 请求已接收 +- 2: 请求已接收 -- 3: 请求处理中 +- 3: 请求处理中 -- 4: 请求已完成，且响应已就绪 +- 4: 请求已完成，且响应已就绪 status： -- 200: "OK"。 +- 200: "OK"。 -- 404: 未找到页面。 +- 404: 未找到页面。 -在 onreadystatechange 事件中，**当 readyState 等于 4，且状态码为200时，表示响应已就绪**。 +在 onreadystatechange 事件中，**当 readyState 等于 4，且状态码为 200 时，表示响应已就绪**。 ### 服务器响应的内容 -- responseText：获得字符串形式的响应数据。 - -- responseXML：获得 XML 形式的响应数据。 - -如果响应的是普通字符串，就使用responseText；如果响应的是XML，使用responseXML。 - -## Ajax 传输 XML - -### XML 语法 - -XML（Extensible Markup Language）：可扩展标记语言。详细语法可以查看：[#](http://www.w3school.com.cn/xml/index.asp)。 - - -**1、XML声明：** - -```xml - -``` - -第一行的声明，指定了XML版本(1.0)以及使用的编码。 - - -**2、自定义标签：** - -XML中没有默认的标签，所有的标签都是我们自己已定义的。例如： - -```xml - - -``` - -XML中没有单标签，都是双标签。 - -**3、根节点：** - -XML中必须要有一个根节点，所有的子节点都放置在根节点下。例如： - -```xml - - - -``` - -### XML 解析 - -因为 XML 就是标签，所以我们可以直接用**解析Dom元素**的方法解析 XML。 - -**解析过程：** - -（1）html 部分：（包含 xml ） - -```html - - - - - Document - - - - fox - 18 - 小花花 - - - -``` - - -（2）解析 xml： - -```html - - -``` - -### ajax 请求解析xml（举例） - -（1）get_xml.php：（里面包含了xml文件） - -```php - -``` - -上方代码解释： - -- php 自带了 读取 xml 文件的方法。 - -- 在 php 中，如果要使用xml传输数据，则需要使用header()设置返回的内容为xml。 - -（2）get_xml.html：（Ajax 请求，获取并解析xml） - -```html - - - - - Document - - - - - - -``` - -## Ajax 传输 JSON - -### JSON 的语法 - -JSON(JavaScript Object Notation)：是ECMAScript的子集。作用是进行数据的交换。语法更为简洁，网络传输、机器解析都更为迅速。 - - -语法规则： - -- 数据在键值对中 - -- 数据由逗号分隔 - -- 花括号保存对象 - -- 方括号保存数组 - -数据类型： - -- 数字（整数或浮点数） - -- 字符串（在双引号中） - -- 逻辑值（true 或 false） - -- 数组（在方括号中） - -- 对象（在花括号中） - -- null - -示例： - -```json -// 对象 -{ - "name":"fox", - "age":"18", - "sex":"true", - "car":null -} - -// 数组 -[ - { - "name":"小小胡", - "age":"1" - }, - { - "name":"小二胡", - "age":"2" - } -] -``` - -### JavaScript中：json 字符串 <--> js 对象 - -基本上，所有的语言都有**将 json 字符串转化为该语言对象**的语法。 - -比如在 js中： - -- JSON.parse()：将JSON字符串转化为 js 对象。例如： - -```javascript - // 将 JSON 字符串格式化为 js 对象 - var jsObj = JSON.parse(ajax.responseText); -``` - -- JSON.stringify()：将 JS 对象转化为JSON字符串。例如： - -```javascript - var Obj = { - name: "fox", - age: 18, - skill: "撩妹" - }; - - console.log(Obj); - - // 将 js 对象格式化为 JSON 字符串 - var jsonStr = JSON.stringify(Obj); -``` - -### PHP中：json 字符串 <--> js 对象 - -- **json_decode()**方法：将`json`字符串转化为变量。 - -- **json_encode()**方法：将变量转化为`json`字符串。 - -代码举例： - -```php -"; - // php数组 - $arrayName = array('name' =>'littleFox' ,'age' => 13 ); - // php对象 转化为 json字符串 - print_r(json_encode($arrayName)); - ?> -``` - -输出结果： - -```bash - stdClass Object ( [name] => itcast [age] => 54 [skill] => 歌神 ) - {"name":"littleFox","age":13} - -``` - -### ajax 请求解析 json（举例） - -（1）Person.json: - -```json -{ - "name":"小强", - "skill":"砍树", - "friend":"老板" -} -``` - -（2）myJson.php： - -```php - -``` - -（3）getJson.html： - -```html - - - - - Document - - -

获取 json 数据

- - - - -``` - -演示效果： - -![](http://img.smyhvae.com/20180228_1740.gif) +- responseText：获得字符串形式的响应数据。 +- responseXML：获得 XML 形式的响应数据。 +如果响应的是普通字符串，就使用 responseText；如果响应的是 XML，使用 responseXML。 ## jQuery 中的 Ajax - -JQuery作为最受欢迎的js框架之一，常见的Ajax已经帮助我们封装好了，只需要调用即可。更为详细的api文档可以查阅：[w3cSchool_JQueryAjax](http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp) +JQuery 作为最受欢迎的 js 框架之一，常见的 Ajax 已经帮助我们封装好了，只需要调用即可。更为详细的 api 文档可以查阅：[w3cSchool_JQueryAjax](http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp) 格式举例： ```javascript $.ajax({ - url:'01.php',//请求地址 - data:'name=fox&age=18',//发送的数据 - type:'GET',//请求的方式 - success:function (argument) {},// 请求成功执行的方法 - beforeSend:function (argument) {},// 在发送请求之前调用,可以做一些验证之类的处理 - error:function (argument) {console.log(argument);},//请求失败调用 - }) + url: '01.php', //请求地址 + data: 'name=fox&age=18', //发送的数据 + type: 'GET', //请求的方式 + success: function (argument) {}, // 请求成功执行的方法 + beforeSend: function (argument) {}, // 在发送请求之前调用,可以做一些验证之类的处理 + error: function (argument) { + console.log(argument); + }, //请求失败调用 +}); ``` - - 代码举例： （1）index.html ```html - + - - - jquery-ajax - - - -
- - - + + + jquery-ajax + + + +
+ + + ``` @@ -644,15 +340,10 @@ echo $text; ``` - - ## 创作不易，赞赏作者 如果你觉得本教程对你有帮助，或者你想催更，不妨赞赏一下。 你的赞赏和认可，是我最大的动力： - ![](http://img.smyhvae.com/20210510_2100.jpg) - - diff --git a/05-JavaScript基础：异步编程和Ajax/03-Ajax传输json和XML.md b/05-JavaScript基础：异步编程和Ajax/03-Ajax传输json和XML.md new file mode 100644 index 0000000..4963dc4 --- /dev/null +++ b/05-JavaScript基础：异步编程和Ajax/03-Ajax传输json和XML.md @@ -0,0 +1,326 @@ + + +## Ajax 传输 JSON + +### JSON 的语法 + +JSON(JavaScript Object Notation)：是 ECMAScript 的子集。作用是进行数据的交换。语法更为简洁，网络传输、机器解析都更为迅速。 + +语法规则： + +- 数据在键值对中 + +- 数据由逗号分隔 + +- 花括号保存对象 + +- 方括号保存数组 + +数据类型： + +- 数字（整数或浮点数） + +- 字符串（在双引号中） + +- 逻辑值（true 或 false） + +- 数组（在方括号中） + +- 对象（在花括号中） + +- null + +示例： + +```json +// 对象 +{ + "name":"fox", + "age":"18", + "sex":"true", + "car":null +} + +// 数组 +[ + { + "name":"小小胡", + "age":"1" + }, + { + "name":"小二胡", + "age":"2" + } +] +``` + +### JavaScript 中：json 字符串 <--> js 对象 + +基本上，所有的语言都有**将 json 字符串转化为该语言对象**的语法。 + +比如在 js 中： + +- JSON.parse()：将 JSON 字符串转化为 js 对象。例如： + +```javascript +// 将 JSON 字符串格式化为 js 对象 +var jsObj = JSON.parse(ajax.responseText); +``` + +- JSON.stringify()：将 JS 对象转化为 JSON 字符串。例如： + +```javascript +var Obj = { + name: 'fox', + age: 18, + skill: '撩妹', +}; + +console.log(Obj); + +// 将 js 对象格式化为 JSON 字符串 +var jsonStr = JSON.stringify(Obj); +``` + +### PHP 中：json 字符串 <--> js 对象 + +- **json_decode()**方法：将`json`字符串转化为变量。 + +- **json_encode()**方法：将变量转化为`json`字符串。 + +代码举例： + +```php +"; + // php数组 + $arrayName = array('name' =>'littleFox' ,'age' => 13 ); + // php对象 转化为 json字符串 + print_r(json_encode($arrayName)); + ?> +``` + +输出结果： + +```bash + stdClass Object ( [name] => itcast [age] => 54 [skill] => 歌神 ) + {"name":"littleFox","age":13} + +``` + +### ajax 请求解析 json（举例） + +（1）Person.json: + +```json +{ + "name": "小强", + "skill": "砍树", + "friend": "老板" +} +``` + +（2）myJson.php： + +```php + +``` + +（3）getJson.html： + +```html + + + + + Document + + +

获取 json 数据

+ + + + +``` + +演示效果： + +![](http://img.smyhvae.com/20180228_1740.gif) + + +## Ajax 传输 XML + +### XML 语法 + +XML（Extensible Markup Language）：可扩展标记语言。详细语法可以查看：[#](http://www.w3school.com.cn/xml/index.asp)。 + +**1、XML 声明：** + +```xml + +``` + +第一行的声明，指定了 XML 版本(1.0)以及使用的编码。 + +**2、自定义标签：** + +XML 中没有默认的标签，所有的标签都是我们自己已定义的。例如： + +```xml + + +``` + +XML 中没有单标签，都是双标签。 + +**3、根节点：** + +XML 中必须要有一个根节点，所有的子节点都放置在根节点下。例如： + +```xml + + + +``` + +### XML 解析 + +因为 XML 就是标签，所以我们可以直接用**解析 Dom 元素**的方法解析 XML。 + +**解析过程：** + +（1）html 部分：（包含 xml ） + +```html + + + + + Document + + + + fox + 18 + 小花花 + + + +``` + +（2）解析 xml： + +```html + +``` + +### ajax 请求解析 xml（举例） + +（1）get_xml.php：（里面包含了 xml 文件） + +```php + +``` + +上方代码解释： + +- php 自带了 读取 xml 文件的方法。 + +- 在 php 中，如果要使用 xml 传输数据，则需要使用 header()设置返回的内容为 xml。 + +（2）get_xml.html：（Ajax 请求，获取并解析 xml） + +```html + + + + + Document + + + + + + +``` diff --git a/05-JavaScript基础：异步编程和Ajax/03-函数封装-Ajax发送http请求（get&post）.md b/05-JavaScript基础：异步编程和Ajax/04-函数封装-Ajax发送http请求（get&post）.md similarity index 98% rename from 05-JavaScript基础：异步编程和Ajax/03-函数封装-Ajax发送http请求（get&post）.md rename to 05-JavaScript基础：异步编程和Ajax/04-函数封装-Ajax发送http请求（get&post）.md index ced1983..d027261 100644 --- a/05-JavaScript基础：异步编程和Ajax/03-函数封装-Ajax发送http请求（get&post）.md +++ b/05-JavaScript基础：异步编程和Ajax/04-函数封装-Ajax发送http请求（get&post）.md @@ -1,7 +1,6 @@ - ## 函数封装 ajax_tool.js： @@ -233,8 +232,4 @@ test_post.php： echo $_POST['friend']; ?> -``` - -工程文件： - -- 2018-02-28-Ajax请求封装.rar \ No newline at end of file +``` \ No newline at end of file