From ac353c5a0781158efc4415b9335d1e0753ed4c8f Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Wed, 28 Feb 2018 18:12:06 +0800 Subject: [PATCH] add file:ajax --- 08-Ajax/01-服务器分类及PHP入门.md | 2 +- 08-Ajax/02-Ajax入门.md | 13 - .../02-Ajax入门和发送http请求（get&post）.md | 580 ++++++++++++++++++ 08-Ajax/04-Ajax.md | 100 +++ README.md | 27 +- 5 files changed, 682 insertions(+), 40 deletions(-) delete mode 100644 08-Ajax/02-Ajax入门.md create mode 100644 08-Ajax/02-Ajax入门和发送http请求（get&post）.md create mode 100644 08-Ajax/04-Ajax.md diff --git a/08-Ajax/01-服务器分类及PHP入门.md b/08-Ajax/01-服务器分类及PHP入门.md index e36c73f..39861f1 100644 --- a/08-Ajax/01-服务器分类及PHP入门.md +++ b/08-Ajax/01-服务器分类及PHP入门.md @@ -180,7 +180,7 @@ 动态网站的原理：浏览器请求动态网站的页面（比如*.php），php拼接数据并动态生成html页面，然后将新生成的页面返回给浏览器 - +php 之所以被称为最好的语言，是因为：基本上，我们能够想到的功能，它都帮助我们封装成了方法。十分方便。 ## PHP的常见语法 diff --git a/08-Ajax/02-Ajax入门.md b/08-Ajax/02-Ajax入门.md deleted file mode 100644 index 724f44f..0000000 --- a/08-Ajax/02-Ajax入门.md +++ /dev/null @@ -1,13 +0,0 @@ - - -## 同步和异步 - -概念： - - -- 同步：必须等待前面的任务完成，才能继续后面的任务。 - -- 异步：不受当前任务的影响。 - -拿排队举例： - diff --git a/08-Ajax/02-Ajax入门和发送http请求（get&post）.md b/08-Ajax/02-Ajax入门和发送http请求（get&post）.md new file mode 100644 index 0000000..2fe0d25 --- /dev/null +++ b/08-Ajax/02-Ajax入门和发送http请求（get&post）.md @@ -0,0 +1,580 @@ + +> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8485028.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。 + +> 以下是正文。 + +## 同步和异步 + +### 同步和异步的概念 + + +- 同步：必须等待前面的任务完成，才能继续后面的任务。 + +- 异步：不受当前任务的影响。 + +拿排队举例： + +- 同步：在银行排队时，只有等到你了，才能够去处理业务。 + +- 异步：在排队的时候，可以玩手机。 + +### 异步更新网站 + +我们在访问一个普通的网站时，当浏览器加载完`HTML、CSS、JS`以后，网站的内容就固定了。如果想让网站内容发生更改，就必须**刷新**页面才能够看到更新的内容。 + +可如果用到**异步更新**，情况就大为改观了。比如，我们在访问新浪微博时，看到一大半了，点击底部的**加载更多**，会自动帮我们加载更多的微博，同时页面并没有刷新。 + +试想一下，如果没有异步刷新的话，每次点击“加载更多”，网页都要刷新，体验就太不好了。 + +web前端里的异步更新，就要用到 Ajax。 + + +## Ajax + +### Ajax 的概念 + +在浏览器中，我们可以在不刷新页面的情况下，通过ajax的方式去获取一些新的内容。 + +Ajax：Asynchronous Javascript And XML（异步 JavaScript 和 XML）。它并不是凭空出现的新技术，而是对于现有技术的结合。Ajax 的核心是 js 对象：**XMLHttpRequest**。 + + +### 发送 Ajax 请求的五个步骤 + +> 其实也就是 使用 XMLHttpRequest 对象的五个步骤。 + +我们先回忆一下，一个完整的HTTP请求需要的是： + +- 请求的网址、请求方法get/post。 + +- 提交请求的内容数据、请求主体等。 + +- 接收响应回来的内容。 + +发送 Ajax 请求的五个步骤： + +（1）创建异步对象。即 XMLHttpRequest 对象。 + +（2）设置请求的参数。包括：请求的方法、请求的url。 + +（3）发送请求。 + +（4）注册事件。 onreadystatechange事件，状态改变时就会调用。 + +如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。 + +（5）获取返回的数据。 + +### Ajax 请求：get 请求举例 + +（1）index.html： + +```html + + + + + Document + + +

Ajax 发送 get 请求

+ + + + + +``` + +（2）02-ajax.php： + +```php + +``` + +效果如下： + +![](http://img.smyhvae.com/20180228_1605.gif) + +### Ajax 请求：post 请求举例 + +index.html： + +```html + + + + + Document + + +

Ajax 发送 get 请求

+ + + + +``` + +## XMLHttpRequest 对象详解 + +我们在上一段讲解了使用 XMLHttpRequest 对象的五个步骤。本段，我们讲一下注意事项。 + +### 发送请求 + +发送请求的方法： + +```javascript + open(method, url, async); +``` + +参数解释： + +- method：请求的类型；GET 或 POST + +- url：文件在服务器上的位置 + +- async：true（异步）或 false（同步） + +另外还有个方法：（仅用于 POST 请求） + +```javascript + send(string); +``` + +### POST请求时注意 + +如果想让 像form 表单提交数据那样使用POST请求，就需要使用 XMLHttpRequest 对象的 setRequestHeader()方法 来添加 HTTP 头。然后在 send() 方法中添加想要发送的数据： + +```javascript + xmlhttp.open("POST","ajax_test.php", true); + + xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); + + xmlhttp.send("name=smyhvae&age=27"); +``` + +### onreadystatechange 事件 + +注册 onreadystatechange 事件后，每当 readyState 属性改变时，就会调用 onreadystatechange 函数。 + +readyState：（存有 XMLHttpRequest 的状态。从 0 到 4 发生变化） + +- 0: 请求未初始化 + +- 1: 服务器连接已建立 + +- 2: 请求已接收 + +- 3: 请求处理中 + +- 4: 请求已完成，且响应已就绪 + +status： + +- 200: "OK"。 + +- 404: 未找到页面。 + +在 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) + +## 我的公众号 + +想学习**代码之外的软技能**？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。 + +扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： + +![](http://img.smyhvae.com/2016040102.jpg) + + + + diff --git a/08-Ajax/04-Ajax.md b/08-Ajax/04-Ajax.md new file mode 100644 index 0000000..776823b --- /dev/null +++ b/08-Ajax/04-Ajax.md @@ -0,0 +1,100 @@ + + + +```html + +``` + + + + + + +```html + +``` + + + + + + +```html + +``` + + + + + + +```html + +``` + + + + + +```html + +``` + + + + + +```html + +``` + + + + + + +```html + +``` + + + + + + + +```html + +``` + + + + + + + +```html + +``` + + + + + + + +```html + +``` + + + + + + + +```html + +``` + + diff --git a/README.md b/README.md index 7f852e7..be89e43 100644 --- a/README.md +++ b/README.md @@ -47,29 +47,4 @@ - [08-JavaScript基础：BOM的常见内置方法和内置对象](./03-JavaScript/08-JavaScript基础：BOM的常见内置方法和内置对象.md) -## 前端基础练习 - -- [01-CSS基础练习：JD首页的制作（顶部和底部）](./04-前端基础练习/01-CSS基础练习：JD首页的制作（顶部和底部）.md) - -- [02-CSS基础练习：JD首页的制作（快捷导航部分）](./04-前端基础练习/02-CSS基础练习：JD首页的制作（快捷导航部分）.md) - -- [03-DOM操作练习：基础练习](./04-前端基础练习/03-DOM操作练习：基础练习.md) - -- [04-DOM操作练习：Tab栏切换（通过className设置样式）](./04-前端基础练习/04-DOM操作练习：Tab栏切换（通过className设置样式）.md) - -- [05-DOM操作练习：访问关系的封装）](./04-前端基础练习/05-DOM操作练习：访问关系的封装.md) - -- [06-DOM操作练习：通过style对象设置样式](./04-前端基础练习/06-DOM操作练习：通过style对象设置样式.md) - -- [07-DOM操作练习：innerHTML的方式创建元素](./04-前端基础练习/07-DOM操作练习：innerHTML的方式创建元素.md) - -- [08-JavaScript基础：定时器](./04-前端基础练习/08-JavaScript基础：定时器.md) - - -## JavaScript进阶 - - -- [01-offset家族和匀速动画(含轮播图的实现)](./06-JavaScript进阶/01-offset家族和匀速动画(含轮播图的实现).md) - - - +更多内容，请点开文件夹。