前端复习之Ajax，忘完了
1 * Day01：
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 *
1.get请求类型的异步交互
1 <?php
2 //用于处理客户端的Ajax交互
3 //1.接收客户端发送的请求数据
4 $user=$_GET['user'];
5 //2.向客户端进行响应
6 echo 'get request successful';
7 ?>
1 <body>
2 <input type="button" value="异步请求" id="btn">
3 <script>
4 //实现Ajax交互的步骤
5 var btn=document.getElementById("btn");
6 btn.onclick=function(){
7 /*
8 * 1.实现Ajax主要依靠XMLHttpRequest对象
9 * * 创建XMLHttpRequest对象
10 *
11 */
12 var xhr=getXhr();
13 /*
14 * 2.与服务器端建立连接
15 * * open(method,url,async)方法
16 * * method - 设置当前请求的类型（ＧＥＴ或ＰＯＳＴ）
17 * * url - 设置当钱的请求类型
18 * * async - 设置是否异步（Boolean）
19 * * 默认为true
20 * * 官方认为XMLHttpRequest就用来实现交互的，为false的话，报错
21 */
22 xhr.open("get","01.php?user=zhangwuji",true)
23 /*
24 * 3.客户端向服务器端发送请求
25 * * send(请求参数)方法
26 * * 请求参数的格式 - key=value
27 * * 如果请求类型为GET方式的话
28 * * send()方法是不能向服务器发送请求数据的
29 * * 注意
30 * * send()方法是不能省略的
31 * * GET 请求类型 - send(NULL)
32 */
33 xhr.send(null);
34 /*
35 * 4.客户端接收服务器端的响应
36 * * 使用onreadystatechange事件 -
37 * *监听服务器
38 * * readyState属性
39 * * 得到服务器端当前通信状态
40 * * 备选项
41 * * 0 尚未初始化（服务器端）
42 * * 1 正在发送请求
43 * * 2 请求完成
44 * * 3 正在响应
45 * * 4 响应完成
46 * * status-状态码
47 * * 200 OK
48 * * responseText属性
49 * * 接受服务器端的数据（HTML格式）
50 */
51 xhr.onreadystatechange=function(){
52 //alert(xhr.readyState);
53 if(xhr.readyState==4){
54 //alert(xhr.status);
55 if(xhr.status==200&&xhr.status<300||xhr.status==3){
56 //接受服务器端的数据
57 var data=xhr.responseText;
58 console.log(data);
59 }
60 }
61 }
62 }
63 function getXhr(){
64 var xhr=null;
65 if(window.XMLHttpRequest){
66 xhr=new XMLHttpRequest();
67 }else{
68 xhr=new ActiveXObject("Microsoft.XMLHttp");
69 }
70 return xhr;
71 }
72 </script>
73 </body>
1 // 2.post请求类型的异步交互
<?php
2 //1.接受客户端发送的请求
3 $user=$_POST['user'];
4 //2.进行响应
5 echo $user.'post request successful';
6 ?>
1 <body>
2 <input type="button" value="异步" id="btn">
3 <script>
4 var btn=document.getElementById("btn");
5 btn.onclick=function(){
6 //实现Ajax的异步交互
7 var xhr=getXhr();
8 xhr.open("post","02.php",true);
9 /*
10 * 如果Ajax使用post请求类型的话
11 * * 必须在send()方法调用之前
12 * * 使用setRequestHeader（key,value)方法
13 * * 该方法用于设置请求头
14 */
15 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
16 xhr.send("user=zhangwuji");
17 xhr.onreadystatechange=function(){
18 if(xhr.readyState==4){
19 if(xhr.status==200){
20 var data=xhr.responseText
21 console.log(data);
22 }
23 }
24 }
25 }
26 function getXhr(){
27 var xhr=null;
28 if(window.XMLHttpRequest){
29 xhr=new XMLHttpRequest();
30 }else{
31 xhr=new ActiveXObject("Microsoft.XMLhttp");
32 }
33 return xhr;
34 }
35 </script>
36 </body>
1 //3.表单的异步交互
<?php
2 $user=$_POST['user'];
3 $pwd=$_POST['pwd'];
4
5 if($user=='admin'&&$pwd=='admin'){
6 echo 'login successful';
7 }else{
8 echo 'login error';
9 }
10 ?>
1 <body>
2 <form id="myform" name="myform" action="03.php" method="post">
3 用户名：<input type="text" id="user" name="user"><br>
4 密码：<input type="text" id="pwd" name="pwd"><br>
5 <input type="button" id="btn" value="登录">
6 </form>
7 <script>
8 /*
9 * <form>表单元素，存在submit按钮，提交表单
10 * 使用Ajax提交表单的话，不需要submit
11 *
12 *
13 */
14 //1.位button按钮绑定onclick事件
15 var btn=document.getElementById("btn");
16 btn.onclick=function(){
17 //使用Ajax实现表单提交
18 var xhr=getXhr();
19 xhr.open("post","03.php");
20 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
21 //send发送用户名和密码
22 var user=document.getElementById("user").value;
23 var pwd=document.getElementById("pwd").value;
24
25 xhr.send("user="+user+"pwd="+pwd);
26 xhr.onreadystatechange=function(){
27 if(xhr.readyState==4&&xhr.status==200){
28 var data=xhr.responseText;
29 console.log(data);
30 }
31 }
32 }
33 function getXhr(){
34 xhr=null;
35 if(window.XMLHttpRequest){
36 xhr=new XMLHttpRequest();
37 }else{
38 xhr=new ActiveXObject("Microsoft.XMLHttp");
39 }
40 return xhr;
41 }
42 </script>
43 </body>
4.普通二级联动与异步交互的二级联动
1 <body>
2 <select id="province">
3 <option>请选择</option>
4 <option>山东省</option>
5 <option>陕西省</option>
6 <option>吉林省</option>
7 </select>
8
9 <select id="city">
10 <option>请选择</option>
11 </select>
12 <script >
13 //1.为SELECT元素绑定onchange事件
14 var provinceEle=document.getElementById("province");
15 provinceEle.onchange=function(){
16 //2.获取用户当前选择的省份名称
17 //3.创建对应的城市列表 - 数组
18 //遍历城市列表
19 //4.创建<option>元素
20 //5.将城市的信息添加到<option>元素上
21 //6.将创建的所有<option>元素添加到ID为city的元素上
22
23 var city=document.getElementById("city");
24 var opts=city.getElementsByTagName("option");
25 for (var z=opts.length-1;z>0 ; z--)
26 { //将id为city的元素内容清空
27 city.removeChild(opts[z]);
28 }
29
30 var province =provinceEle.value;
31
32 var cities=[];
33 switch(province){
34 case "山东省":
35 cities=["青岛市","济南市","威海市","日照市"];
36 break;
37 case "陕西省":
38 cities=["榆林市","神木","绥德","子州"];
39 break;
40 case "吉林省":
41 cities=["长春市","松原市","通化市","四平市"];
42 break;
43 }
44 for (var i=0;i<cities.length ;i++ )
45 {
46 var option=document.createElement("opotion");
47 var textNode=document.createTextNode(cities[i]);
48 option.appendChild(textNode);
49 alert(textNode);
50 //var city=document.getElementById("city");
51 city.appendChild(option);
52 }
53 }
54 </script>
55 </body>
1 <?php
2 //用于处理客户端的请求二级联动的数据
3 //1，接收客户端发送的省份信息
4 $province=$_POST['province'];
5 //echo $province;
6 //2.判断当前的省份信息，提供不同的城市信息
7 switch($province){
8 case '山东省':
9 echo '青岛市,济南市,威海市,日照市';
10 break;
11 case '陕西省':
12 echo '榆林,神木,绥德,子州';
13 break;
14 case '吉林省':
15 echo '长春市,松原市,通化市,四平市';
16 break;
17 }
18 //服务器端响应的是一个字符串
19 ?>
1 <body>
2 <select id="province">
3 <option>请选择</option>
4 <option>山东省</option>
5 <option>陕西省</option>
6 <option>吉林省</option>
7 </select>
8
9 <select id="city">
10 <option>请选择</option>
11 </select>
12 <script>
13 var provinceEle=document.getElementById("province");
14 provinceEle.onchange=function(){
15 //清空
16 var city=document.getElementById("city");
17 var opts=city.getElementsByTagName("option");
18 for(var z=opts.length-1;z>0;z--){
19 city.removeChild(opts[z]);
20 }
21
22 if(provinceEle.value!="请选择"){
23 //执行ajax异步请求
24 var xhr=getXhr();
25 xhr.open("post","6.php",true);
26 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
27 xhr.send("province="+provinceEle.value);
28 xhr.onreadystatechange=function(){
29 if(xhr.readyState==4&&xhr.status==200){
30 //接收服务器端的数据内容
31 var data=xhr.responseText;
32 //data是字符串，转化为
33 //console.log(data);
34 var cities=data.split(",");console.log(cities[i]);
35 console.log(cities);
36 for(var i=0;i<cities.length;i++){
37 var option=document.createElement("option");
38 var textNode=document.createTextNode(cities[i]);
39
40 option.appendChild(textNode);
41
42 //var city=document.getElementById("city");
43
44 city.appendChild(option);
45 }
46 }
47 }
48 }
49 console.log(city);
50 }
51 function getXhr(){
52 var xhr=null;
53 if(window.XMLHttpRequest){
54 xhr=new XMLHttpRequest();
55 }else{
56 xhr=new ActiveXObject("Microsoft.XMLHttp");
57 }
58 return xhr;
59 }
60 </script>
61 </body>
1 <?php
2 //接收客户端发送的请求数据state
3 $state=$_REQUEST['state'];
4 //判断state
5 if($state==1){//获取省份
6 echo '山东省,陕西省,吉林省';
7 }else if($state==2){//获取城市
8
9 $province=$_POST['province'];
10 switch($province){
11 case '山东省':
12 echo '青岛市,济南市,威海市,日照市';
13 break;
14 case '陕西省':
15 echo '榆林,神木,绥德,子州';
16 break;
17 case '吉林省':
18 echo '长春市,松原市,通化市,四平市';
19 break;
21 }
22 }
26 ?>
1 <body>
2 <select id="province">
3 <option>请选择</option>
4 </select>
5
6 <select id="city">
7 <option>请选择</option>
8 </select>
9 <script>
10 var xhr=getXhr();
11 //第一次执行ajax异步请求 - 省份
12 window.onload=function(){
13
14 xhr.open("get","08.php?state=1");
15 xhr.send(null);
16 xhr.onreadystatechange=function(){
17 if(xhr.readyState==4&&xhr.status==200){
18 var data=xhr.responseText;
19 var provinces=data.split(",");
20 for(var i=0;i<provinces.length;i++){
21 var option=document.createElement("option");
22 var text=document.createTextNode(provinces[i]);
23 option.appendChild(text);
24 var province=document.getElementById("province");
25 province.appendChild(option);
26 }
27 }
28 }
29 }
30 //第二次执行Ajax异步请求 - 城市
31 var province=document.getElementById("province");
32 province.onchange=function(){
33 xhr.open("post","08.php?state=2",true);
34 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
35
36 //console.log(provinceEle.value);
37 xhr.send("province="+province.value);
38 xhr.onreadystatechange=function(){
39 if(xhr.readyState==4&&xhr.status==200){
40 var data=xhr.responseText;
41 console.log(data);
42 var cities=data.split(",");
43 for(var i=0;i<cities.length;i++){
44 var option=document.createElement("option");
45 var text=document.createTextNode(cities[i]);
46 option.appendChild(text);
47 var city=document.getElementById("city");
48 city.appendChild(option);
49 }
50 }
51 }
52 }
53 function getXhr(){
54 var xhr=null;
55 if(window.XMLHttpRequest){
56 xhr=new XMLHttpRequest();
57 }else{
58 xhr=new ActiveXObject("Microsoft.XMLHttp");
59 }
60 return xhr;
61 }
62 </script>
Day02：
1 Day 02:
2 * 接收服务器端的响应数据
3 * 使用XMLHttpRequest核心对象的responseText属性
4 * 该属性只能接收文本(HTML)格式
5 * 问题
6 * 解析过程比较复杂（拆串）
7 * 拆串或拼串极容易出错
8 * XML格式
9 * 基本内容
10 * HTML XHTML dhtml XML的区别
11 * HTML就是网页 - 元素定义大小写
12 * XHTML就是严格意义的HTML - 元素定义小写
13 * DHTML - BOM|DOM
14 * XML - 配置文件|数据格式
15 * XML文件的扩展名为".xml"
16 * XML的定义方式与HTML非常相似
17 * HTML的元素预定义好的
18 * XML允许自定义元素
19 * XML的版本
20 * 1.0版本 -
21 * 1.1版本 - 几乎没人用
22 * 版本不会再更xin
23 * XML的作用
24 * 作为数据格式 - 存储数据
25 * XML语法
26 * 声明
27 <?xml version="1.0" encoding="UTF-8"?>
28 * version - 设置当前XML文件的版本
29 * encoding - 设置当前XML文件的编码
30 * 注意 - 必须出现在0行0列上
31 * 定义元素
32 * 根元素
33 * 必须是起始标签
34 * 只能定义一个
35 * 定义元素
36 * 元素名可以自定义
37 * 分类
38 * 起始标签或单标签
39 * 定义属性
40 * 定义注释
41 *
42 *
43 *
44 * DOM解析XML
45 * 创建XML的解析器
46
47 function parseXML(){
48 var xmlDoc=null;
49 if(window.DOMParser){
50 //其他浏览器
51 var parser=new DOMParser();
52 xmlDoc=parser.parseFromString("02.xml","application/xml");
53 }else{
54 //IE浏览器
55 var parser=new ActiveXObject("Microsoft.XMLDOM");
56 //异步
57 parser.async="false";
58 xmlDoc= parser.loadXML("02.xml");
59 }
60 return xmlDoc;
61
62 }
63 * 解析XML与解析HTML一致
64 * 很少使用ById和ByName两个方法
65 * 注意
66 * 浏览器不允许读取外部的XML文件
67 * 浏览器解析符合XML格式的字符串
68 *
69 * Ajax中的XML格式
70 * 请求的数据格式 - XML
71 * 客户端如何构建符合XML格式的数据
72 * 构建的数据类型 - 字符串（string）类型
73 * 字符串的内容符合XML格式的语法要求
74 * 服务器端如何接收符合XML的数据
75 * 接收客户端的请求数据 - 字符串（string类型）
76 * PHP继承了DOM的相关内容
77 * DOMDocument
78 * DOMElement
79 * DOMNode
80 * 响应的数据格式 - xml
81 * 服务器端如何构建符合XML格式的数据
82 * 设置服务器端的响应头"Content-Type"值为"text/xml"
83 * 构建一个符合XML格式的字符串（string）类型
84 * 手动方式构建字符串string
85 * DOMDOcument对象的方法
86 * loadXML(符合XML格式的字符串)
87 * saveXML()方法进行响应
88 * 客户端如何接收符合XML格式的数据
89 * 使用XMLHttpRequest对象的responseText属性接收
90 * 接收回来的是XML DOM对象（不需要使用XML解析器解析）
91 * JSON格式
92 * 基本内容
93 * JSON - Javascript Object Notation（JS原生支持）
94 * JSON的结构
95 * Array
96 * Object
97 * 支持的数据类型
98 * String字符串
99 * Number数值
100 * Boolean
101 * Object
102 * Array
103 * null
104 * Ajax中的JSON格式
105 * 请求格式为JSON
106 * 客户端向服务器断发送请求 - JSON格式的数据
107 * 构建符合JSON格式的字符串
108 * 保证定义字符串时，使用单引号（里面使用双引号）
109 * 服务器端接收
110 * 接收客户端的数据
111 * 使用json_decode()函数进行解析
112 json_decode($json,true)
113 * 响应格式为JSON
114 * 服务器端向客户端发送响应为JSON格式的数据
115 * 使用json_encode()函数将PHP变量（array）转换为符合JSON格式的字符串
116 * 客户端接收JSON格式的数据
117 * 使用XMLHttpRequest对象的responseText属性接收
118 * 没有responseJSON属性
119 * 使用eval()函数进行转换
120
121 * HTML（文本格式）、XML格式、JSON格式的优缺点
122 * HTML
123 * 优点 - 简单
124 * 缺点 - 解析复杂
125 * XML
126 * 优点 - 易于构建复杂数据
127 * 缺点 - 构建、解析复杂
128 * JSON
129 * 优点 - 轻量级
130 * 缺点 - 可能转换失败
131 }]'
3.在PHP中如何将数组转换成JSON字符串？
通过json_encode(数组)
4.前端页面将取回的JSON字符串转换成js对象/数组
通过JSON.parse(数据)
1 //02.xml文件
<?xml version="1.0" encoding="ISO-8859-1" ?>
3 <users>
4 <!-- 这是注释 -->
5 <user id="01">
6 <name>zhangsanfeng</name>
7 <age>18</age>
8 <job>jiaozhudie</job>
9 <addr>guangingding</addr>
10 <love />
11 </user>
12 <user id="02">
13 <name>zhangsanzhu</name>
14 <age>19</age>
15 <job>eat</job>
16 <addr>154</addr>
17 <love />
18 </user>
19 </users>
1 <script>
2 function parseXML(xml){
3 var xmlDoc=null;
4 if(window.DOMParser){
5 //其他浏览器
6 var parser=new DOMParser();
7 xmlDoc=parser.parseFromString("02.xml","application/xml");
8 }else{
9 //IE浏览器
10 var parser=new ActiveXObject("Microsoft.XMLDOM");
11 //异步
12 //parser.async=false;
13 xmDoc.async=false;
14 xmlDoc= parser.loadXML("02.xml");
15 }
16 return xmlDoc;
17
18 }
19 var xmlDoc=parseXML("<user id='01'><name>zhangsanfeng</name></user>");
20
21 var userEle=xmlDoc.getElementsByTagName("user")[0];
22 var nameEle=userEle.getAttribute("name");/*????????????????????*/
23 var nameTxt=nameEle.childNodes[0].nodeValue;
24 console.log(nameTxt);
25 </script>
1 /03.xml
<?xml version="1.0" encoding="utf-8" ?>
2 <china>
3 <province id="01" name="山东省">
4 <cities>
5 <city>青岛市</city>
6 <city>济南市</city>
7 <city>威海市</city>
8 <city>日照市</city>
9 <city>德州市</city>
10 </cities>
11 </province>
12 <province name="辽宁省">
13 <cities>
14 <city>大连市</city>
15 <city>沈阳市</city>
16 <city>铁岭市</city>
17 <city>锦州市</city>
18 <city>丹东市</city>
19 </cities>
20 </province>
21 <province name="陕西省">
22 <cities>
23 <city>A市</city>
24 <city>B市</city>
25 <city>C市</city>
26 <city>D</city>
27 <city>E</city>
28 </cities>
29 </province>
30
31 </china>
1 <script>
2 //1.
3 function parseXML(xml){
4 var xmlDoc=null;
5 if(window.DOMParser){
6 var parser=new DOMParser();
7 xmlDoc=parser.parseFromString("03.xml","application/xml");
8 }else{
9 xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
10 xmlDoc.async=false;
11 xmlDoc.loadXML("03.xml");
12 }
13 return xmlDoc;
14 }
15 //2.
16 var xmlDoc=parseXML('<province id="01" name="山东省"><city name="青岛市"/><city name="济南市"/><city name="威海市"/><city name="日照市"/><city name="德州市"/></province>');
17 //a.
18 var proEle=xmlDoc.getElementsByTagName("province")[0];
19 var proTxt=proEle.getAttribute("name");
20 console.log(proTxt);
21 //b.
22 var citiesEle=xmlDoc.getElementsByTagName("city");//数组
23 for(var i=0;i<citiesEle.length;i++){
24 var cityEle=citiesEle[i];
25 var cityTxt=cityEle.getAttribute("name");
26 console.log(cityTxt);
27 }
28 </script>
1 <?php
2 //接受客户端发送的请求
3 $user=$_POST['user'];//符合XML格式要求的string
4 //var_dump($user);
5
6 //创建DOMDocument对象
7 $doc = new DOMDocument();
8 //2.调用loadXML（）方法
9 $result=$doc->loadXML($user);
10 //var_dump($doc);
11 //echo $user;
12
13
14 //echo $doc->saveXML();
15
16 //1.如何构建符合XML格式的数据
17 //修改响应头的Content-Type值为"text/xml"
18 //header('Content-Type:text/xml');
19
20 $doc->saveXML();
21 ?>
1 <body>
2 <input type="button" value="Ajax" id="btn">
3 <script>
4 var btn=document.getElementById("btn");
5 btn.onclick=function(){
6 //实现Ajax的异步交互
7 var xhr=getXhr();
8 xhr.open("post","07.php");
9 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
10 /*
11 * 如何构建符合XML格式的请求数据
12 * * 注意
13 * * 请求数据的格式 - key=value不能改变的
14 * * 将value值构建成符合XML格式的数据
15 * * 数据类型 - 字符串（string）
16 * * 格式符合XML的语法要求
17 * * 编写注意
18 * * 定义变量 - 专门构建XML格式的数据
19 * * 在send（）方法进行拼串
20 */
21 var user="<user><name>zhangsanfeng</name><age>18</age></user>";
22 xhr.send("user="+user);
23 xhr.onreadystatechange=function(){
24 if(xhr.readyState==4&&xhr.status==200){
25 //
26 //var data=xhr.responseText;
27 //console.log(data);
28 var xmlDoc=xhr.responseXML;
29 var nameEle=xmlDoc.getElementsByTagName("name")[0];
30 var txtEle=nameEle.childNodes[0];
31
32 }
33 }
34 }
35 function getXhr(){
36 var xhr=null;
37 if(window.XMLHttpRequest){
38 xhr=new XMLHttpRequest();
39 }else{
40 xhr=new ActiveXObject("Microsoft.XMLHttp");
41 }
42 return xhr;
43 }
44 </script>
45 </body>
Day03:
1 Day 03：
2 * jQuery中的Ajax
3 * 封装第一层 - 类似于原生Ajax的用法
4 * $.ajax() - 最复杂
5 * 选项 - 格式是{key:value}
6 * * url - 请求地址
7 * * type - 请求类型，默认get
8 * * async - 是否异步，默认true
9 * * Content-Type - POST方式发送数据的前提
10 * 默认值为application/x-www-form-urlencoded
11 * * data - 请求数据，格式必须为key:value
12 * * success - 请求成功后的回调函数
13 * function(data,textStatus){}
14 * data - 服务器端响应的数据内容
15 * textStatus - 表示ajax请求的状态
16 * success
17 * * error - 请求失败后的回调函数
18 * function(XMLHttpRequest,textStatus,errorThrown){}
19 * XMLHttpRequest - ajax的核心对象
20 * textStatus - 表示ajax请求的状态
21 * error、timeout、notmodified等
22 * errorThrown - 错误异常
23 * dataType - 设置响应数据格式
24 * 封装第二层 - 基于第一层再次封装
25 * load() - 最简单、局限性最大
26 * $().load(url,data,callback)
27 * * url - 必要，设置当前Ajax请求的地址
28 * * data - 可选，设置当前Ajax请求的数据
29 * 格式必须是key/value格式
30 * * callback - 可先，当前Ajax请求成功后的回调函数
31 * 该回调参数的行参(data)就是服务器端响应的数据内容
32 * * 问题
33 * 请求类型由是否发送请求数据决定
34 * 没有请求数据时，请求类型是GET
35 * 发送请求数据时，请求类似是POST
36 * 默认接收服务器端的数据内容
37 * 是以字符串类型(HTML格式)进行接收
38 * 无法使用XML或JSON格式
39 *
40 *
41 * $.get() - 请求类型GET
42 * $.get(url,data,callback,type)
43 * * url - 设置当前Ajax请求的地址
44 * * data - 设置当前Ajax请求的数据
45 * 格式要求为key:value，构建object
46 * callback - 当前Ajax请求成功后的回调函数
47 * type - 设置服务器端响应的数据格式
48 * 默认值 - HTML格式
49 * xml - XML格式
50 * json - JSON格式
51 * 注意
52 * 无论是否发送请求数据，请求类型都是GET
53 * $.get()方法可以使用HTML格式、XML格式及json格式
54 *
55 * $.post() - 请求类型是POST
56 * 使用方式与$.get()方式一致
57 * 封装第三层 - 特殊用法
58 * $.getScript() - 动态读取脚步（JavaScript代码）
59 * $.getScript(url,callback)
60 * * url - 读取脚本的地址
61 * * callback - 读取成功后的回调函数
62 * function(data){}
63 * $.getJSON() — 接收JSON格式数据
64 *
65 * 表单的ajax请求
66 * 表单的序列化
67 * serialize() - 返回JSON字符串
68 * 使用表单元素的name属性
69 * {key:value}
70 * seriaizeArray() - 返回JSON对象
71 * JSON对象是由一个对象数组组成的
72 * [ele1,ele2,ele3,...]
73 * 注意
74 * 表单中必须有name属性
75 * jQuery.form插件
76 * 作用 - 实现表单的异步提交
77 * 两个核心方法
78 * ajaxForm()方法
79 * ajaxSubmit()方法 - 使用ajax异步提交表单
80 * 底层机制
81 * 表单提交机制
82 * 表单异步提交的方式
83 * 不再使用submit按钮，而使用button按钮
84 通过button按钮绑定click事件，实现ajax异步提交
85 * 表单的序列化
86 * 表单的异步提交
87 * 依旧使用submit按钮
88 在<form>原素绑定onsubmit事件
89 在onsubmit的处理函数中
90 * 表单的序列化
91 * 表单的异步提交
92 * 阻止表单的默认行为（return false）
93 * 跨域请求 - $.getJson() 方法
94 * 跨域
95 * 完全跨域 - IP不同
96 * http://www.baidu.com
97 * http://www.tedu.coom
98 * 跨子域 - IP相同但端口号不同
99 * http://127.0.0.1:8000
100 * http://127.0.0.1:8888
101 * 域名
102 * 顶级域名
103 * http://baidu.com
104 * 二级域名
105 * http://wenku.baidu.com
106 * http://www.baidu.com/kongjian
107 *
108 * 万维网协议
109 * 默认不允许跨域请求的
110 * 实现跨域
111 如何实现跨域请求
112 * 使用JSONP形式的回调函数来加载其他网域的JSON数据
113 * JSONP - JSON with Padding(JSON的一种使用模式)
114 * 核心内容 - HTML的<script //>元素具有开放策略
115 * 实现方式
116 * $.getJSON()方法的URL后增加请求数据
117 $.getJSON("09.php?callback=?",function(data){});
118 * Cookie
119 * 基本内容
120 * 浏览器的缓存
121 * 存储在浏览器内存中
122 * 关闭浏览器（窗口）后，数据会被自动销毁
123 * 存储在用户电脑硬盘中
124 * 关闭浏览器（窗口）后，数据不会销毁
125 * Cookie（小甜饼）
126 * 缓存文件 - 一些用户数据存储在此
127 * 问题
128 * 用户数据是以明码来存储的
129 * Cookie谁都可以读取
130 * A网站生成的Cookie文件，归属到百度
131 * 如何操作
132 * 读取Cookie
133 * 写入Cookie - 将
134
135 Ajax PROJECT:
136 * Web开发工具
137 * webStorm软件
138 * webStorm如何创建PHP页面
139 注意：webStorm并不支持php
140 * 下载PHPstorm软件
141 * 配置php
142 * 点击工具栏"File"->"SetTing",弹出配置窗口
143 * 选择“Editor
1// jQuery中的load方法
<?php
2 //1.接收客户端的请求数据
3 $name=$_POST['name'];
4 $age=$_POST['age'];
5 var_dump($name);
6 var_dump($age);
7 //2.向客户端进行响应
8 //echo 'load sucess';
9
10 echo '{"name":"zhuzhuxia","age":"23"}';
11 ?>
1 <body>
2 <input type="button" id="btn"value="load"/>
3 <div></div>
4 <script>
5 $("#btn").click(function(){
6 /*
7 * click事件中，调用load()方法
8 * $().load(url,data,callback)
9 * * url - 必要，设置当前Ajax请求的地址
10 * * data - 可选，设置当前Ajax请求的数据
11 * * 格式必须是key/value格式
12 * * callback - 可先，当前Ajax请求成功后的回调函数
13 * 该回调参数的行参(data)就是服务器端响应的数据内容
14 * 注意
15 * 服务器端响应的数据自动写入到<div>元素
16 * 现象的原因 - div元素调用load()方法
17 * load()方法的请求类型
18 * 没有请求数据时，请求类型是GET
19 * 发送请求数据时，请求类似是POST
20 * load()方法的请求类型由是否发送请求数据来决定
21 * load()方法接收服务器短的响应数据
22 * 是以字符串类型来接受的
23 *
24 */
25
26 //请求数据格式为key/value，就是object对象
27
28 var user={"name":"zhangsanfeng","age":"18"};
29 $("div").load("01.php",user,function(data){
30 //var json=eval("("+data+")");
31 console.log(data);//只能使用html格式或字符串，JSON不行
32
33 });
34 });
35 </script>
1 //jQuery中的get方法或post方法
<?php
2 //1.接收客户端请求的数据
3 $name=$_GET['name'];
4 $age=$_GET['age'];
5 //var_dump($name);
6 //2.向客户端进行响应
7 //a.响应格式为HTML格式
8 //echo 'get success';
9 //b.响应格式为XML格式
10 //header("Content-Type:text/xml");
11 //echo '<user><name>zhuzhuxai</name><age>25</age></user>';
12 //c.响应格式为json格式
13 echo '{"name":"aboluo","age":"30"}';
14 ?>
1 <body>
2 <input type="button" id="btn1" value="get"/>
3 <input type="button" id="btn2" value="post"/>
4 <script>
5 $("#btn1").click(function(){
6 /*
7 * $.get(url,data,callback,type)
8 * * url - 设置当前Ajax请求的地址
9 * * data - 设置当前Ajax请求的数据
10 * 格式要求为key:value，构建object
11 * callback - 当前Ajax请求成功后的回调函数
12 * type - 设置服务器端响应的数据格式
13 * 默认值 - HTML格式
14 * xml - XML格式
15 * json - JSON格式
16 * 注意
17 * 无论是否发送请求数据，请求类型都是GET
18 * $.get()方法可以使用HTML格式、XML格式及json格式
19 */
20 var user={"name":"zhangsangfeng","age":"20"};
21 $.get("02.php",user,function(data){
22 //1.console.log(eval("("+data+")"));
23 //2.
24 console.log(data)
25 },"json");
26
27 });
28 </script>
29
30 </body>
1 //jQuery中的ajax方法
<?php
2 echo 'post success';
3 ?>
1 <body>
2 <input type="button" value="ajax" id="btn"/>
3 <script>
4 $("#btn").click(function(){
5 /*
6 * $.ajax(options)方法
7 * * 选项 - 格式是{key:value}
8 * * url - 请求地址
9 * * type - 请求类型，默认get
10 * * async - 是否异步，默认true
11 * * Content-Type - POST方式发送数据的前提
12 * 默认值为application/x-www-form-urlencoded
13 * * data - 请求数据，格式必须为key:value
14 * * success - 请求成功后的回调函数
15 * function(data,textStatus){}
16 * data - 服务器端响应的数据内容
17 * textStatus - 表示ajax请求的状态
18 * success
19 * * error - 请求失败后的回调函数
20 * function(XMLHttpRequest,textStatus,errorThrown){}
21 * XMLHttpRequest - ajax的核心对象
22 * textStatus - 表示ajax请求的状态
23 * error、timeout、notmodified等
24 * errorThrown - 错误异常
25 * dataType - 设置响应数据格式
26 */
27 var user={"name":"zhuzhaxia","age":"26"};
28
29 $.ajax({
30 url:"04.php",
31 type:"post",
32 async:true,
33 date:user,
34 success:function(data,textStatus){
35 console.log(data);
36 console.log(textStatus);
37 },
38 error:function(){
39 console.log(textStatus);
40 console.log(errorThrown);
41 }
42 });
43 });
44 </script>
45 </body>
jQuery中的ajax实现简单聊天
1 <body>
2 <input type="text" id="chatdata"/>
3 <input type="button" id="btn" value="发送"/>
4 <div></div>
5 <script>
6 /*
7 * 需求
8 * * 客户端
9 * 用户在输入框中输入内容
10 * 用户点击发送按钮，使用$.ajax()执行Ajax请求
11 * 接收服务器端响应数据写入到<div>元素中
12 * 服务器端
13 * 接收客户端发送的聊天内容
14 * 将聊天内容响应回去（json）格式
15 *
16 *
17 */
18
19 var chatlist="";//不能赋值null
20
21
22 $("#btn").click(function(){
23 var data={"value":$("#chatdata").val()};
24
25 $.ajax({
26 url:"05.php",
27 type:"post",
28 async:true,
29 data:data,
30 dataType:"json",
31 success:function(data,textStatus){
32 //console.log(data);
33 //console.log(textStatus);
34
35 chatlist+="<p>"+data.chat+"</p>";
36
37 $("div").html($(chatlist));
38 },
39 /*error:function(){
40 console.log(textStatus);
41 console.log(errorThrown);
42 }*/
43 });
44 });
45 </script>
<?php
//接收客户端的数据
$value=$_POST['value'];//-->key
//var_dump($value);
//2.进行响应
echo '{"chat":"'.$value.'"}';
?>
动态读取脚本:
1 <body>
2 <input type="button"value="读取" id="btn"/>
3 <div id="comments"></div>
4 <!-- 这段JS代码在HTML页面加载时被加载-->
5 <!--<script src="script.js"></script>-->
6 <script>
7 $("#btn").click(function(){
8 /*
9 * $.getScript(url,callback)
10 * * url - 读取脚本的地址
11 * * callback - 读取成功后的回调函数
12 * function(data){}
13 */
14 $.getScript("06.php",function(data){
15 console.log(data);
16 });
17 });
18 </script>
19 </body>
<?php
echo '$("#comments").html("<p>zhuzhuxia</p><p>hahaha哈</p>")';
?>
表单的AJax请求:
1 <body>
2 <form id="myform" name="myform" action="07.php" method="post">
3 用户名：<input type="text" id="username" name="username" ><br>
4 密码：<input type="text" id="password" name="password"><br>
5 <input type="button" value="登录" id="btn"/>
6
7 </form>
8 <script>
9 /*
10 * 需求
11 * * 当用户输入用户名密码，点击登录按钮时
12 * * 使用jQuery中的$.post()方法执行ajax的异步请求
13 * * 服务器端判断登录是否成功
14 *
15 *
16 */
17 $("#btn").click(function(){
18 /*1.data封装表单中的用户名和密码的信息
19 var data={
20 "username": $("#username").val(),
21 "password": $("#password").val()
22 };*/
23
24 //2.
25 var data=$("#myform").serialize();//表单中得定义name属性
26
27 /*
28 * 客户端向服务器端发送的请求数据
29 * * 格式要求需为{key:value}
30 * * 手工方式构建这种格式的数据
31 * 如果这种完成
32 * * 无论具有多少表单元素，表单只有一个
33 * 只获取表单，通过某种机制自动将表单中所有元素的值，构建成{key:value}格式的数据
34 * 表单的序列化
35 * serialize() - JSON字符串
36 * 使用表单元素的name属性
37 * {key:value}
38 * seriaizeArray() - JSON对象
39 * JSON对象是由一个对象数组组成的
40 * [ele1,ele2,ele3,...]
41 */
42 $.post("07.php",data,function(data){
43 console.log(data);
44 });
45 });
46 </script>
47 </body>
1 <?php
2 //1.
3 $username=$_POST['username'];
4 $password=$_POST['password'];
5 //2.判断是否登录成功
6 if($username=='admin'&&$password=='admin'){
7 echo 'login success';
8 }else{
9 echo 'login error';
10 }
11 ?>
序列化完成用户注册功能:
1 <body>
2 <form id="regist">
3 用户名：<input type="text" name="username"/><br>
4 密码：<input type="text" name="password"/><br>
5 确认密码：<input type="text" name="repassword"/><br>
6 email:<input type="text" name="email"/><br>
7 地址：<input type="text" name="addr"/><br>
8 <input type="button" value="注册" id="btn"/>
9 </form>
10 <script>
11 //需求 - 表单ajax异步提交，表单序列化
12 $("#btn").click(function(){
13 //1.表单序列化
14 var data=$("#regist").serialize();
15 //2.表单异步提交
16 $.post("08.php",data,function(data){
17 console.log(data);
18 });
19 });
20 </script>
21 </body>
跨域请求:
1 <body>
2 <!--
3 创建html页面和php页面（模拟）
4 * html页面放在一个域
5 * php页面放在另一个域
6 -->
7 <input type="button" value="跨域请求" id="btn"/>
8 <script>
9 $("#btn").click(function(){
10 /*
11 * $.getJSON(url,data,callback)方法
12 * * URL - 请求地址
13 * data - 请求数据
14 * callback - 请求成功后的回调函数
15
16 * 该方法返回的是JSON
17
18 如何实现跨域请求
19 * 使用JSONP形式的回调函数来加载其他网域的JSON数据
20 * JSONP - JSON with Padding(JSON的一种使用模式)
21 * 核心内容 - HTML的<script>元素具有开放策略
22 * 实现方式
23 * $.getJSON()方法的URL后增加请求数据
24 url?callnck=?
25 */
26 $.getJSON("09.php?callback=?",function(data){
27 console.log(data);
28 });
29 });
30 </script>
31 </body>
1 <?php
2 //
3 //echo '{"msg":"post success."}';
4 $callback=$_GET['callback'];
5 //2.输出$callback
6 //var_dump($callback);
7 /*
8 * 3.向客户端进行响应 - json
9 * * 如何callback是一个函数的话，假设$callback 就是函数的名称
10 * * 函数的调用体 - $callback(实参)
11 * 向该函数传递的参数为实参
12 */
13 echo $callback.'({"msg":"get success."})';
14 ?>
前端复习之Ajax，忘完了的更多相关文章
- SSM框架中前端页面（AJAX+Jquery+spring mvc+bootstrap）
前端新增页面的模态框,采用bootstarp建立.定义了empName,email,gender,depatName,四个属性的ID:其中保存按钮的ID:emp_save_btn,对应的点击函数如下: ...
- 前端通信：ajax设计方案（三）--- 集成ajax上传技术
在此之前让我感慨一下现在的前端开发的氛围.我遇到好多人,给我的观念都是,这个东西这个框架有了,那个东西那个框架做了,前端嘛,学几个框架,这个拼凑一下那个拼凑一下就好了.其实我想问,东西都框架做了,那你 ...
- 前端学习——使用Ajax方式POST JSON数据包
0.前言 本文解释怎样使用Jquery中的ajax方法传递JSON数据包,传递的方法使用POST(当然PUT又有时也是一个不错的选择).POST JSON数据包相比标准的POST格式可读性更好 ...
- 前端复习－03-接上面ajax跨域问题的解决与探索
废话不多少 ..我估计一万个人都搞不清楚 什么是跨域 然后就被这堵墙无情的挡住了..我尝试了很多办法解决这个问题.后来再慕课网上的一个老师的ppt那里看到一张图 我觉得 能记住这张图的话 应该就算是深 ...
- 前端通信：ajax设计方案（六）--- 全局配置、请求格式拓展和优化、请求二进制类型、浏览器错误搜集以及npm打包发布
距离上一次博客大概好多好多时间了,感觉再不搞点东西出来,感觉就废了的感觉.这段时间回老家学习驾照,修养,然后7月底来上海求职(面了4家,拿了3家office),然后入职同程旅游,项目赶进度等等一系列的 ...
- [前端引用] 利用ajax实现类似php include require 等命令的功能
利用ajax实现类似php中的include.require等命令的功能 最新文件下载: https://github.com/myfancy/ajaxInclude 建议去这里阅读readme-2. ...
- 前端通信：ajax设计方案（八）--- 设计请求池，复用请求，让前端通信快、更快、再快一点
直接进入主题,本篇文章有点长,包括从设计阶段,到摸索阶段,再到实现阶段,最后全面覆盖测试阶段(包括数据搜集清洗),还有与主流前端通信框架进行对比PK阶段. 首先介绍一下一些概念: 1. 浏览器的并发能 ...
- 前端通信：ajax设计方案（二）---集成轮询技术
上一篇文章介绍了ajax技术核心方法,和跨域的问题(只要后台支持跨域默认post就可以),这篇文章讲解一下使用ajax实现的轮询技术,至于iframe,SSE服务器单向推送,以及webSocket双工 ...
- 前端新手分析 AJAX执行顺序，数据走向
我是一名前端的newer 在刚学习AJAX和eJS的时候,对于顺序上面有很大迷惑,现在稍微清楚了一点, 理解不对的地方,还请各位大牛帮助给我指导一下. 总的 服务器和客户端的顺序 一. 除了必要的 ...
- 前端复习－02-ajax原生以及jq和跨域方面的应用。
ajax这块我以前一直都是用现成的jq封装好的东西,而且并没有深入浅出的研究过,也没有使用过原生形式的实现.包括了解jsonp和跨域的相关概念但是依然没有实现过,其中有一个重要的原因我认为是我当时并不 ...
随机推荐
- Docker的常见使用
一.Docker的常见使用 1.docker的使用 1.1 查看docker版本号信息 docker version docker info 1.2 启动docker systemctl start ...
- Java设计模式之抽象工厂(02)
对工厂方法进行抽象.当增加新的产品时,不用改动工厂类.而是集成已有的工厂接口或者抽象工厂,创建新的工厂.这就是对扩展开发,对修改封闭. 1 package Pak; 2 3 public abstra ...
- 想通过anconda来创建一个虚拟环境，结果发现一直报错。An unexpected error has occurred. Conda has prepared the above report.
本来想要通过conda create -n drf-admin python==3.8 来创建一个虚拟环境,结果一直报错. An unexpected error has occurred. Cond ...
- SQL SERVER 截断大日志文件
1.改成完整模式下,先完整备份,然后只备份事务日志2. 改成简单模式,然后截断(运行下边示例代码)3.再备份事务日志(观察LDF文件有没有变小)-----收缩大日志 SELECT * FROM sy ...
- 面试视频知识点整理1-7（http协议）
http协议类 1)http协议的主要特点 简单快速 统一资源符 灵活 通过http协议,可以修改http头,完成不同数据类型的传输 无连接 ...
- Something Just Like This
I've been reading books of old我遍读旧籍 The legends and the myths那些古老传奇和无边神秘 Achilles and his gold如阿喀琉斯和 ...
- 谈谈 Redis 的过期策略
在日常开发中,我们使用 Redis 存储 key 时通常会设置一个过期时间,但是 Redis 是怎么删除过期的 key,而且 Redis 是单线程的,删除 key 会不会造成阻塞.要搞清楚这些,就要了 ...
- pyhon_元组（tuple）
定义: 元组中可以存储不一样类型的数据,使用小括号存储数据,中间用逗号进行分割. 元组中的数据定义好后,无法进行修改,有保护数据的目的. 格式化字符串定义多个值的时候,本质上也是元组. 测试: inf ...
- JS篇(010)-JavaScript 继承的方式和优缺点
答案:六种方式 一.原型链继承 缺点: 引用类型的属性被所有实例共享 在创建 Child 的实例时,不能向 Parent 传参 二.借用构造函数(经典继承) 优点: 避免了引用类型的属性被所有实例共享 ...
- Linux非正式学习随笔(1)
11.5进linux学的第一件事,找个中文输入法.Linux是一套免费的类unix操作系统GPL:gnu通用公共许可证.托马斯斯托曼提出gnu计划,自由软件思想的一个协议.Linux诞生1991年10 ...