1 *
2 * Ajax
3 * Asynchronous JavaScript and XML
4 * 直译中文 - JavaScript和XML的异步
5 * （不严格的定义）客户端与服务器端进行交互，而无需刷新当前页面的技术，称之为Ajax
6 * Ajax实现的是B/S架构下的异步交互
7 * 实现异步交互的技术
8 * <iframe src="">元素
9 * 同步与异步的区别
10 * 同步交互 - 客户端向服务器发送请求，到服务器端进行响应，这个过程中，用户是不能做任何其他事情的
11 * 执行速度相对比较慢
12 * 响应的是完整的HTML代码
13 * 异步交互 - 客户端向服务器端发送请求，直到服务器端进行响应，这个过程中，用户可以做任何其他事情的
14 * 执行速度相对比较快
15 * 响应的是部分数据
16 * Ajax具有核心对象
17 * XMLHttpRequest对象
18 * 创建XMLHttpRequest对象
19 *
20 * 属性
21 * readyState - 表示当前服务器的通信状态
22 * 0 - （服务器端）尚未初始化
23 * 1 - （服务器端）正在接收
24 * 2 - （服务器端）接收完毕
25 * 3 - （服务器端）正在响应
26 * 4 - （服务器端）响应完毕
27 * status
28 * 200 - 请求成功
29 * 404 - 网页找不到
30 * 500 - 服务器端的错误
31 * 方法
32 * open(method，URL) - 与服务器端建立连接
33 * send() - 向服务器端发送请求
34 * 事件
35 * onreadystatechange
36 * 作用 - 监听服务器端的通信状态改变
37 * 实现Ajax异步交互步骤：
38 1.创建XMLHttpRequest核心对象
39 固定方法
40 function getXhr(){
41 var xhr=null;
42 if(window.XMLHttpRequest){
43 xhr=new XMLHttpRequest();
44 }else{
45 xhr=new ActiveXObject("Microsoft.XMLHttp");
46 }
47 return xhr;
48 }
49 2.与服务器建立连接
50 * 使用XMLHttpRequest对象的open(method,url)方法
51 * method - 设置当前请求的类型
52 * GET -
53 * POST -
54 * url - 设置当前请求的地址
55 3.向服务发送请求
56 * 使用XMLHttpRequest对象的send(请求参数)方法
57 * 请求参数格式为 - key=value
58 * GET - send(null)
59 * send()方法不起作用
60 * 请求数据 - 增加在URL？key=value
61 * POST - send()
62 * 在send()方法调用前，调用setRequestHeader()方法
63 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
64 4.接受服务器端的响应数据
65 * 使用XMLHttpRequest对象的onreadystatechange事件，监听服务器端的通信状态
66 * 使用XMLHttpRequest对象的readystate属性，判断服务器的当前状态(0-4)
67 * 使用XMLHttpRequest对象的status属性，判断服务器端的状态码（200）
68 * 使用XMLHttpRequest对象的responseText属性，接受服务器端的响应数据
69 * GET与POST的区别
70 * GET请求类型
71 * send()方法不起作用，但是不能被省略
72 xhr.send(null);
73 * 请求参数 - 添加到url?key=value
74 * POST请求类型
75 * send()方法起作用
76 * 在send()方法被调用前，使用setRequestHeader()方法设置请求头信息
77 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
78 * 使用Ajax的原则
79 * 小则怡情，大则上身
80 * 另外的实现ajax的步骤
81 * 创建XMLHttpRequest对象
82 * 注册监听
83 * 建立链接
84 * 发送请求
85 *
86
87 Day 02:
88 * 接收服务器端的响应数据
89 * 使用XMLHttpRequest核心对象的responseText属性
90 * 该属性只能接收文本(HTML)格式
91 * 问题
92 * 解析过程比较复杂（拆串）
93 * 拆串或拼串极容易出错
94 * XML格式
95 * 基本内容
96 * HTML XHTML dhtml XML的区别
97 * HTML就是网页 - 元素定义大小写
98 * XHTML就是严格意义的HTML - 元素定义小写
99 * DHTML - BOM|DOM
100 * XML - 配置文件|数据格式
101 * XML文件的扩展名为".xml"
102 * XML的定义方式与HTML非常相似
103 * HTML的元素预定义好的
104 * XML允许自定义元素
105 * XML的版本
106 * 1.0版本 -
107 * 1.1版本 - 几乎没人用
108 * 版本不会再更xin
109 * XML的作用
110 * 作为数据格式 - 存储数据
111 * XML语法
112 * 声明
113 <?xml version="1.0" encoding="UTF-8"?>
114 * version - 设置当前XML文件的版本
115 * encoding - 设置当前XML文件的编码
116 * 注意 - 必须出现在0行0列上
117 * 定义元素
118 * 根元素
119 * 必须是起始标签
120 * 只能定义一个
121 * 定义元素
122 * 元素名可以自定义
123 * 分类
124 * 起始标签或单标签
125 * 定义属性
126 * 定义注释
127 *
128 *
129 *
130 * DOM解析XML
131 * 创建XML的解析器
132
133 function parseXML(){
134 var xmlDoc=null;
135 if(window.DOMParser){
136 //其他浏览器
137 var parser=new DOMParser();
138 xmlDoc=parser.parseFromString("02.xml","application/xml");
139 }else{
140 //IE浏览器
141 var parser=new ActiveXObject("Microsoft.XMLDOM");
142 //异步
143 parser.async="false";
144 xmlDoc= parser.loadXML("02.xml");
145 }
146 return xmlDoc;
147
148 }
149 * 解析XML与解析HTML一致
150 * 很少使用ById和ByName两个方法
151 * 注意
152 * 浏览器不允许读取外部的XML文件
153 * 浏览器解析符合XML格式的字符串
154 *
155 * Ajax中的XML格式
156 * 请求的数据格式 - XML
157 * 客户端如何构建符合XML格式的数据
158 * 构建的数据类型 - 字符串（string）类型
159 * 字符串的内容符合XML格式的语法要求
160 * 服务器端如何接收符合XML的数据
161 * 接收客户端的请求数据 - 字符串（string类型）
162 * PHP继承了DOM的相关内容
163 * DOMDocument
164 * DOMElement
165 * DOMNode
166 * 响应的数据格式 - xml
167 * 服务器端如何构建符合XML格式的数据
168 * 设置服务器端的响应头"Content-Type"值为"text/xml"
169 * 构建一个符合XML格式的字符串（string）类型
170 * 手动方式构建字符串string
171 * DOMDOcument对象的方法
172 * loadXML(符合XML格式的字符串)
173 * saveXML()方法进行响应
174 * 客户端如何接收符合XML格式的数据
175 * 使用XMLHttpRequest对象的responseText属性接收
176 * 接收回来的是XML DOM对象（不需要使用XML解析器解析）
177 * JSON格式
178 * 基本内容
179 * JSON - Javascript Object Notation（JS原生支持）
180 * JSON的结构
181 * Array
182 * Object
183 * 支持的数据类型
184 * String字符串
185 * Number数值
186 * Boolean
187 * Object
188 * Array
189 * null
190 * Ajax中的JSON格式
191 * 请求格式为JSON
192 * 客户端向服务器断发送请求 - JSON格式的数据
193 * 构建符合JSON格式的字符串
194 * 保证定义字符串时，使用单引号（里面使用双引号）
195 * 服务器端接收
196 * 接收客户端的数据
197 * 使用json_decode()函数进行解析
198 json_decode($json,true)
199 * 响应格式为JSON
200 * 服务器端向客户端发送响应为JSON格式的数据
201 * 使用json_encode()函数将PHP变量（array）转换为符合JSON格式的字符串
202 * 客户端接收JSON格式的数据
203 * 使用XMLHttpRequest对象的responseText属性接收
204 * 没有responseJSON属性
205 * 使用eval()函数进行转换
206
207 * HTML（文本格式）、XML格式、JSON格式的优缺点
208 * HTML
209 * 优点 - 简单
210 * 缺点 - 解析复杂
211 * XML
212 * 优点 - 易于构建复杂数据
213 * 缺点 - 构建、解析复杂
214 * JSON
215 * 优点 - 轻量级
216 * 缺点 - 可能转换失败
217 * 回顾
218 * DOM
219 * DOM的分类
220 * DOM CORE
221 * DOM HTML
222 * DOM XML
223 * DOM CSS
224 * DOM API
225 * 获取元素
226 * 创建元素
227 * 替换元素
228 * 删除元素
229 * 插入元素
230 * ...
231 *
232 Day 03：
233 * jQuery中的Ajax
234 * 封装第一层 - 类似于原生Ajax的用法
235 * $.ajax() - 最复杂
236 * 选项 - 格式是{key:value}
237 * * url - 请求地址
238 * * type - 请求类型，默认get
239 * * async - 是否异步，默认true
240 * * Content-Type - POST方式发送数据的前提
241 * 默认值为application/x-www-form-urlencoded
242 * * data - 请求数据，格式必须为key:value
243 * * success - 请求成功后的回调函数
244 * function(data,textStatus){}
245 * data - 服务器端响应的数据内容
246 * textStatus - 表示ajax请求的状态
247 * success
248 * * error - 请求失败后的回调函数
249 * function(XMLHttpRequest,textStatus,errorThrown){}
250 * XMLHttpRequest - ajax的核心对象
251 * textStatus - 表示ajax请求的状态
252 * error、timeout、notmodified等
253 * errorThrown - 错误异常
254 * dataType - 设置响应数据格式
255 * 封装第二层 - 基于第一层再次封装
256 * load() - 最简单、局限性最大
257 * $().load(url,data,callback)
258 * * url - 必要，设置当前Ajax请求的地址
259 * * data - 可选，设置当前Ajax请求的数据
260 * 格式必须是key/value格式
261 * * callback - 可先，当前Ajax请求成功后的回调函数
262 * 该回调参数的行参(data)就是服务器端响应的数据内容
263 * * 问题
264 * 请求类型由是否发送请求数据决定
265 * 没有请求数据时，请求类型是GET
266 * 发送请求数据时，请求类似是POST
267 * 默认接收服务器端的数据内容
268 * 是以字符串类型(HTML格式)进行接收
269 * 无法使用XML或JSON格式
270 *
271 *
272 * $.get() - 请求类型GET
273 * $.get(url,data,callback,type)
274 * * url - 设置当前Ajax请求的地址
275 * * data - 设置当前Ajax请求的数据
276 * 格式要求为key:value，构建object
277 * callback - 当前Ajax请求成功后的回调函数
278 * type - 设置服务器端响应的数据格式
279 * 默认值 - HTML格式
280 * xml - XML格式
281 * json - JSON格式
282 * 注意
283 * 无论是否发送请求数据，请求类型都是GET
284 * $.get()方法可以使用HTML格式、XML格式及json格式
285 *
286 * $.post() - 请求类型是POST
287 * 使用方式与$.get()方式一致
288 * 封装第三层 - 特殊用法
289 * $.getScript() - 动态读取脚步（JavaScript代码）
290 * $.getScript(url,callback)
291 * * url - 读取脚本的地址
292 * * callback - 读取成功后的回调函数
293 * function(data){}
294 * $.getJSON() — 接收JSON格式数据
295 *
296 * 表单的ajax请求
297 * 表单的序列化
298 * serialize() - 返回JSON字符串
299 * 使用表单元素的name属性
300 * {key:value}
301 * seriaizeArray() - 返回JSON对象
302 * JSON对象是由一个对象数组组成的
303 * [ele1,ele2,ele3,...]
304 * 注意
305 * 表单中必须有name属性
306 * jQuery.form插件
307 * 作用 - 实现表单的异步提交
308 * 两个核心方法
309 * ajaxForm()方法
310 * ajaxSubmit()方法 - 使用ajax异步提交表单
311 * 底层机制
312 * 表单提交机制
313 * 表单异步提交的方式
314 * 不再使用submit按钮，而使用button按钮
315 通过button按钮绑定click事件，实现ajax异步提交
316 * 表单的序列化
317 * 表单的异步提交
318 * 依旧使用submit按钮
319 在<form>原素绑定onsubmit事件
320 在onsubmit的处理函数中
321 * 表单的序列化
322 * 表单的异步提交
323 * 阻止表单的默认行为（return false）
324 * 跨域请求 - $.getJson() 方法
325 * 跨域
326 * 完全跨域 - IP不同
327 * http://www.baidu.com
328 * http://www.tedu.coom
329 * 跨子域 - IP相同但端口号不同
330 * http://127.0.0.1:8000
331 * http://127.0.0.1:8888
332 * 域名
333 * 顶级域名
334 * http://baidu.com
335 * 二级域名
336 * http://wenku.baidu.com
337 * http://www.baidu.com/kongjian
338 *
339 * 万维网协议
340 * 默认不允许跨域请求的
341 * 实现跨域
342 如何实现跨域请求
343 * 使用JSONP形式的回调函数来加载其他网域的JSON数据
344 * JSONP - JSON with Padding(JSON的一种使用模式)
345 * 核心内容 - HTML的<script //>元素具有开放策略
346 * 实现方式
347 * $.getJSON()方法的URL后增加请求数据
348 $.getJSON("09.php?callback=?",function(data){});
349 * Cookie
350 * 基本内容
351 * 浏览器的缓存
352 * 存储在浏览器内存中
353 * 关闭浏览器（窗口）后，数据会被自动销毁
354 * 存储在用户电脑硬盘中
355 * 关闭浏览器（窗口）后，数据不会销毁
356 * Cookie（小甜饼）
357 * 缓存文件 - 一些用户数据存储在此
358 * 问题
359 * 用户数据是以明码来存储的
360 * Cookie谁都可以读取
361 * A网站生成的Cookie文件，归属到百度
362 * 如何操作
363 * 读取Cookie
364 * 写入Cookie - 将
365
366 Ajax PROJECT:
367 * Web开发工具
368 * webStorm软件
369 * webStorm如何创建PHP页面
370 注意：webStorm并不支持php
371 * 下载PHPstorm软件
372 * 配置php
373 * 点击工具栏"File"->"SetTing",弹出配置窗口
374 * 选择“Editor
375
376 * Ajax案例 - 京东用户中心功能
377 * 订单查询 - （客户端|服务器端|数据库）
378 * 消费记录 - （canvas）
379 * 幸运抽奖 - （Canvas）
