小白读《锋利的jQuery（第2版）》第6章笔记（Ajax）

Asynchronous JavaScript and XML（异步JavaScript和XML），它并不是指一种单一的技术，而是有机地利用了一系列交互网页应用相关的技术所形成的结合体。

Ajax的优势和不足

1.Ajax的优势

不需要插件支持：只需允许JavaScript。
优秀的用户体验：更新数据不需刷新整个页面。
提供Web程序的性能：提供XMLHttpRequest对象向服务器提交希望提交的数据，按需发送。
减轻服务器和带宽的负担：作为用户与服务器之间的中间层，使两者响应异步化。

2.Ajax的不足

浏览器对XMLHttpRequest对象的支持度不足：复杂的兼容性问题。
破坏浏览器前进、“后退”按钮的正常功能
对搜索引擎的支持的不足
开发和调试工具的缺乏

Ajax的XMLHttpRequest对象

核心，Ajax实现的关键——发送异步请求、接收响应及执行回调都是通过它来完成的。
绝大多数浏览器都提供了类似的属性和方法。

API：http://www.w3school.com.cn/xmldom/dom_http.asp

安装Web环境——AppServ

AppServ，PHP网页架站工具组合包。
包含的软件有：Apache、Apache Monitor、PHP、MySQL、PHP-Nuk和phpMy Admin。
1.下载AppServ
下载地址：http://www.appservnetwork.com
2.安装AppServ
点击“Next”按钮，输入网址、电子邮箱、密码等常用信息即可。端口默认为80，当然也可以在安装时进行修改。
安装教程：https://www.appserv.org/en/howto/
3.配置示例程序
将示例程序复制到安装好后的AppServ\www文件夹中，然后在地址栏输入
http://localhost/jQuery/book/sourceCode/Ch6/php/

在这里插入图片描述

AppServ我觉得没有特别简单，wampserver更简单
下载地址：https://sourceforge.net/projects/wampserver/

编写第1个Ajax例子

传统的JavaScript实现的Ajax例子。

HTML

<input type="button" id="" value="Ajax提交" onclick="Ajax();" />
<div id="resText"></div>

JavaScript

//通过这个函数来异步获取信息
function Ajax() {
	var xmlHttpReq = null; //声明一个空对象用来装入XMLHttpRequest
	if (window.ActiveXObject) { //IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest的
		xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
	} else if (window.XMLHttpRequest) { //除IE5 IE6 以外的浏览器XMLHttpRequest是window的子对象
		xmlHttpReq = new XMLHttpRequest(); //实例化一个XMLHttpRequest
	}
	if (xmlHttpReq != null) { //如果对象实例化成功 
		xmlHttpReq.open("GET", "test.asp", true); //调用open()方法并采用异步方式
		xmlHttpReq.onreadystatechange = RequestCallBack; //设置回调函数
		xmlHttpReq.send(null); //因为使用get方式提交，所以可以使用null参调用
	}

	function RequestCallBack() { //一旦readyState值改变，将会调用这个函数
		if (xmlHttpReq.readyState == 4) {
			if (xmlHttpReq.status == 200) {
				//将xmlHttpReq.responseText的值赋给ID为 resText 的元素
				document.getElementById("resText").innerHTML = xmlHttpReq.responseText;
			}
		}
	}
}

在这里插入图片描述

XMLHttpRequest对象的很多属性和方法，对于想快速入门Ajax的人不太容易，jQuery提供了一些日常开发中需要的快捷操作。如load、ajax、get和post等。

jQuery中的Ajax

jQuery对象Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第2层（使用频率最高）是load()、$.get()和$.post()方法，第3层是$.getScript()和$.getJSON()方法。

load()方法

1.载入HTML文档

能载入远程HTML代码并插入DOM中。
结构：load( url [, data] [, callback] )

url ：类型（String），请求HTML页面的URL地址。
data（可选）：类型（Object），发送至服务器的key/value数据。
callback（可选）：类型（Function），请求完成时的回调函数，无论请求成功或失败。

示例：

HTML

test.html

<div class="comment">
    <h6>张三:</h6>
    <p class="para">沙发.</p>
</div>
<div class="comment">
    <h6>李四:</h6>
    <p class="para">板凳.</p>
</div>
<div class="comment">
    <h6>王五:</h6>
    <p class="para">地板.</p>
</div>

新建测试HTML文档

<input type="button" id="send" value="Ajax获取" />

<div class="comment">
	已有评论：
</div>
<div id="resText"></div>

CSS

* { 
	margin:0; 
	padding:0;
}

body { 
	font-size:12px;
}

.comment { 
	margin-top:10px; 
	padding:10px; 
	border:1px solid #ccc;
	background:#DDD;
}

.comment h6 { 
	font-weight:700; 
	font-size:14px;
}

.para { 
	margin-top:5px; 
	text-indent:2em;
	background:#DDD;
}

jQuery

$(function () {
	$("#send").click(function () {
		$("#resText").load("test.html");
	})
})

在这里插入图片描述

load()方法完成了原本很繁琐的工作。开发人员只需要使用jQuery选择器为HTML片段指定目标位置。
参数：将要加载的文件的URL。
test.html的样式是在新建的HTML文档上加载的。

2.筛选载入的HTML文档

通过为load()方法的URL参数指定选择符，就可以从加载过来的HTML文档里筛选出所需的内容。

URL参数的语法结构：
url selector（URL和选择器之间有一个空格）

示例：加载test.html页面中class为“para”的内容

$("#resText").load("test.html .para");

在这里插入图片描述
3.传递方式

根据参数data来自动指定。
没有参数传递，采用GET方式传递，反之，则会自动转换为POST方式。

//无参数传递，则是GET方式
$("#resText").load("test.php",function(){
	//...
});

//有参数传递，则是POST方式
$("#resText").load("test.php", {name: "rain", age: "22"}, function(){
	//...
});

4.回调参数

对于必须加载完毕后才能继续的操作。
3个参数：

请求返回的内容
请求状态
XMLHttpRequest对象

jQuery示例

 $(function(){
  $("#send").click(function(){
	$("#resText").load("test.html .para",function (responseText, textStatus, XMLHttpRequest){
		//responseText   :    请求返回的内容
		//textStatus     :		请求状态： success、error、notmodified、timeout 4种。
		//XMLHttpRequest  :    XMLHttpRequest对象
		alert( $(this).html() );	//在这里this指向的是当前的DOM对象，即 $("#iptText")[0]
		alert(responseText);       //请求返回的内容
		alert(textStatus);		    //请求状态：success，error
		alert(XMLHttpRequest);     //XMLHttpRequest对象
		console.log(XMLHttpRequest);    //XMLHttpRequest对象
	});
  })
})

在这里插入图片描述

`$.get()`方法和`$.post()`方法

传递一些参数给服务器中。

1.$.get()方法
使用GET方式来进行异步请求。
结构：

$.get( url [, data] [, callback] [, type] );

type：类型（String），服务器端返回内容的格式，包括xml、html、script、json、text和_default

示例

HTML

<form id="form1" action="#">
	<p>评论:</p>
	<p>姓名: <input type="text" name="username" id="username" /></p>
	<p>内容: <textarea name="content" id="content"></textarea></p>
	<p><input type="button" id="send" value="提交" /></p>
</form>


<div class='comment'>已有评论：</div>
	<div id="resText">
</div>

CSS

* {
  margin: 0;
  padding: 0;
}
body {
  font-size: 12px;
}
.comment {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  background: #ddd;
}
.comment h6 {
  font-weight: 700;
  font-size: 14px;
}
.para {
  margin-top: 5px;
  text-indent: 2em;
  background: #ddd;
}

jQuery

不知为何，网上提供的源码，后端脚本我只有拍黄片（php）的好用。

若服务端返回的数据是HTML片段

$(function(){
   $("#send").click(function(){
		$.get("get1.php", { 
					username :  $("#username").val() , 
					content :  $("#content").val()  
				}, function (data, textStatus){
                       $("#resText").html(data); // 把返回的数据添加到页面上
				}
		);
   })
})

get1.php

<?php 
	header("Content-Type:text/html; charset=utf-8");
	echo "<div class='comment'><h6>{$_REQUEST['username']}:</h6><p class='para'>{$_REQUEST['content']}</p></div>";
?>

在这里插入图片描述

若服务端返回的数据是XML片段

$(function () {
	$("#send").click(function () {
		$.get("get2.php", {
			username: $("#username").val(),
			content: $("#content").val()
		}, function (data, textStatus) {
			var username = $(data).find("comment").attr("username");
			var content = $(data).find("comment content").text();
			var txtHtml = "<div class='comment'><h6>" + username + ":</h6><p class='para'>" + content + "</p></div>";
			$("#resText").html(txtHtml); // 把返回的数据添加到页面上
		});
	})
})

get2.php

<?php 
	header("Content-Type:text/xml; charset=utf-8");
	echo "<?xml version='1.0' encoding='utf-8'?>".
	     "<comments>".
		 "<comment username='{$_REQUEST['username'] }' >".
		 "<content>{$_REQUEST['content']}</content>".
		 "</comment>".
		 "</comments>";
?>

在这里插入图片描述
XML文档的可移植性是其他数据格式无法比拟的。
XML文档体积相对较大，与其他文件格式相比，解析和操作它们的速度要慢一些。

若服务端返回的数据是JSON文件

$(function () {
	$("#send").click(function () {
		$.get("get3.php", {
			username: $("#username").val(),
			content: $("#content").val()
		}, function (data, textStatus) {
			var username = data.username;
			var content = data.content;
			var txtHtml = "<div class='comment'><h6>" + username + ":</h6><p class='para'>" + content + "</p></div>";
			$("#resText").html(txtHtml); // 把返回的数据添加到页面上
		}, "json");
	})
})

get3.php

<?php 
	header("Content-Type:text/html; charset=utf-8");
	echo "{ \"username\" : \"{$_REQUEST['username']}\" , \"content\" : \"{$_REQUEST['content']}\"}" 
?>

在这里插入图片描述
JSON文件可以方便重用，简洁，易阅读。

将$.get()方法的第4个参数(type)设置为“json”来代表期待服务器端返回的数据格式。

JSON的格式非常严格。

总结

1.不需要与其他应用程序共享数据：HTML。
2.数据需要重用：JSON。
３.远程应用程序未知：XML。

２. $.post()方法

结构和使用方式和$.get()方法相同。

区别:
1.GET请求参数跟在URL后，POST请求是作为HTTP消息的实体内容。
2.GET方式传输的数据有大小限制（不能大于2KB），POST理论上不受限制。
3.GET方式请求的数据会被浏览器缓存，不安全。
4.两种方式传递的数据在服务器的获取不相同。

实例：

$(function () {
	$("#send").click(function () {
		$.post("post1.php", {
			username: $("#username").val(),
			content: $("#content").val()
		}, function (data, textStatus) {
			$("#resText").html(data); // 把返回的数据添加到页面上
		});
	})
})

php中使用$_REQUEST[]来获取。

<?php 
	header("Content-Type:text/html; charset=utf-8");
	echo "<div class='comment'><h6>{$_REQUEST['username']}:</h6><p class='para'>{$_REQUEST['content']}</p></div>";
?>

在这里插入图片描述
load()方法可以达到相同效果

$(function () {
	$("#send").click(function(){
		$("#resText").load("post1.php",{
			username : $("#username").val(),
			content : $("#content").val()
		})
	})
})

在这里插入图片描述

关于$.ajax()方法：
不仅能实现上面get、post、load三个方法的功能，还有

beforeSend：提交前回调函数。
error：请求失败后处理。
success：请求成功后处理。
complete：请求完成后处理。

`$.getScript()`方法和`$.getJSON()`方法

1. $.getScript()

动态创建script标签

$(document.createElement("script")).sttr("src","test.js").appendTo("head");

或者

$("<script type='text/javascript' src='test.js'/>").appendTo("head");

以上两种方式都不理想。

使用$.getScript()

$(function () {
	$('#send').click(function () {
		$.getScript('test.js');
	});
})

test.js

var comments = [{
    "username": "张三",
    "content": "沙发."
  },
  {
    "username": "李四",
    "content": "板凳."
  },
  {
    "username": "王五",
    "content": "地板."
  }
];

var html = '';
$.each(comments, function (commentIndex, comment) {
  html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
})

$('#resText').html(html);

在这里插入图片描述

有回调函数

$(function () {
	$.getScript('jquery.color.js', function () {
		$("<p>加载JavaScript完毕</p>").appendTo("body");
		$("#go").click(function () {
			$(".block").animate({
					backgroundColor: 'pink'
				}, 1000)
				.animate({
					backgroundColor: 'blue'
				}, 1000);
		});
	});
})

在这里插入图片描述

2. $.getJSON()

用于加载JSON文件。

$(function () {
     $('#send').click(function () {
          $.getJSON('test.json', function (data) {
               $('#resText').empty();
               var html = '';
               $.each(data, function (commentIndex, comment) {
                    html += '<div class="comment"><h6>' + comment[
                              'username'] + ':</h6><p class="para">' +
                         comment['content'] + '</p></div>';
               })
               $('#resText').html(html);
          })
     })
})

test.json

[
  {
    "username": "张三",
    "content": "沙发."
  },
  {
    "username": "李四",
    "content": "板凳."
  },
  {
    "username": "王五",
    "content": "地板."
  }
]

在这里插入图片描述

通过使用JSONP形式的对调函数来加载其他网站的JSON数据。

$(function () {
$('#send').click(function () {
	$.getJSON(
		"http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",
		function (data) {
			$.each(data.items, function (i, item) {
				$("<img class='para'/> ").attr("src", item.media.m).appendTo("#resText");
				if (i == 3) {
					return false;
				}
			});
		}
	);
})

http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?

在这里插入图片描述

搜索汽车类别的4张最新图片。

jsoncallback=?中的"?"jQuery将自动将其替换为正确的函数名，以执行回调函数。

JSONP：JSON with Padding，是一个非官方协议。

`$.ajax(`)方法

是jQuery最底层的Ajax实现。

结构：

$.ajax(options)

参数：

url
type：GET、POST。
timeout：请求超时时间。
data
dataType：xml、html、script、json、jsonp、jQuery、text。
beforeSend：请求前
complete：请求完成
success：请求成功
error：请求失败
global：是否全局Ajax事件，默认true。

实例

实现$.getScript()

$(function () {
   $('#send').click(function () {
      $.ajax({
         type: "GET",
         url: "test.js",
         dataType: "script"
      });
   });
})

实现$.getJSON()

$(function () {
	$('#send').click(function () {
		$.ajax({
			type: "GET",
			url: "test.json",
			dataType: "json",
			success: function (data) {
				$('#resText').empty();
				var html = '';
				$.each(data, function (commentIndex, comment) {
					html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment[
						'content'] + '</p></div>';
				})
				$('#resText').html(html);
			}
		});
	});
})

序列化元素

1. serialize()方法

serialize()方法：作为一个jQuery对象，能够将DOM元素内容序列化为字符串，用于Ajax请求。

使用Ajax技术异步提交表单，并将服务器返回的数据显示在当前页面中。

实例:

HTML

<form id="form1" action="#">
	<p>评论:</p>
	<p>姓名: <input type="text" name="username" id="username" /></p>
	<p>内容: <textarea name="content" id="content" rows="2" cols="20"></textarea></p>
	<p><input type="button" id="send" value="提交" /></p>
</form>

<div class='comment'>已有评论：</div>
<div id="resText">
</div>

jQuery

$(function () {
	$("#send").click(function () {
		$.get("get1.php", $("#form1").serialize(), function (data, textStatus) {
			$("#resText").html(data); // 把返回的数据添加到页面上
		});
	})
})

在这里插入图片描述
$.get()方法的数据，可以说映射方式，也可以是字符串方式：

{
	username : $("#username").val(),
	content : $("#content".val()
}

或者

"username="+encodeURIComponent($('#username').val())
+"&content="+encodeURIComponent($('#content').val())

$(function () {
$("#send").click(function () {
		$.get("get1.php", "username=" + encodeURIComponent($('#username').val()) + "&content=" + encodeURIComponent($(
			'#content').val()), function (data, textStatus) {
			$("#resText").html(data); // 把返回的数据添加到页面上
		});
	})
})

使用字符串方式需要注意字符编码（中文问题）。
解决方法：使用serialize()方法

实例：将复选框和单选框的值序列化为字符串形式。

$(function () {
	$("#send").click(function () {
		var $data = $(":checkbox,:radio").serialize();
		alert($data);
	})
})

在这里插入图片描述

2. serializeArray()方法

将DOM元素序列化后，返回JSON格式的数据。

$(function () {
	var fields = $(":checkbox,:radio").serializeArray();
	console.log(fields); // Firebug输出
	$.each(fields, function (i, field) {
		$("#results").append(field.value + " , ");
	});
})

在这里插入图片描述

3. $.param()方法

serialize()方法的核心，用来对一个数组或对象按照key/value进行序列化。

$(function () {
	var obj = {
		a: 1,
		b: 2,
		c: 3
	};
	var k = $.param(obj);
	alert(k) // 输出 a=1&b=2&c=3
})

在这里插入图片描述

jQuery中的Ajax全局事件

Ajax请求开始：触发ajaxStart()方法的回调函数。
Ajax请求结束：触发ajaxStop()方法的回调函数。

实例：模拟数据请求过程文字提示

$(function () {
	//demo1:
	$('#send1').click(function () {
		$.getJSON(
			"http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",
			function (data) {
				$("#resText1").empty();
				$.each(data.items, function (i, item) {
					$("<img/> ").attr("src", item.media.m).appendTo("#resText1");
					if (i == 3) {
						return false;
					}
				});
			}
		);
	});

	//demo2:
	$("#send2").click(function () {
		$.get("get1.php", {
			username: $("#username").val(),
			content: $("#content").val()
		}, function (data, textStatus) {
			$("#resText2").html(data); // 把返回的数据添加到页面上
		});
	})

	$.ajaxPrefilter(function (options) {
		options.global = true;
	});
	//共用这2个全局的ajax事件
	$("#loading").ajaxStart(function () {
		$(this).show();
	});
	$("#loading").ajaxStop(function () {
		$(this).hide();
	});


})

get1.php

<?php 
	header("Content-Type:text/html; charset=utf-8");
	echo "<div class='comment'><h6>{$_REQUEST['username']}:</h6><p class='para'>{$_REQUEST['content']}</p></div>";
?>

在这里插入图片描述

Ajax全局事件中的方法

Ajax请求开始：ajaxStart(callback)方法。
Ajax请求结束：ajaxStop(callback)方法。
Ajax请求完成：ajaxComplete(callback)方法。
Ajax请求发生错误：ajaxError(callback)方法。
Ajax请求发送前：ajaxSend(callback)方法。
Ajax请求成功：ajaxSuccess(callback)方法。

基于jQuery的Ajax聊天室程序

步骤：

基本设想
设计数据库

--Database "chat"

CREATE TABLE `messages` (
  `id` int(7) NOT NULL auto_increment,
  `user` varchar(255) NOT NULL,
  `msg` text NOT NULL,
  `time` int(9) NOT NULL,
  PRIMARY KEY  (`id`)
);

在这里插入图片描述

服务器端处理

1.服务器端链接数据库
2.用户提交信息插入数据库
3.从数据库中获取新的信息并以XML格式输出返回

XML格式如下：

<?xml version="1.0" encoding="UTF-8"?>
<response> 
 <status>1</status> 
 <time>1170323512</time> 
 <message> 
   <author>张三</author> 
   <text>沙发!</text> 
 </message> 
 <message> 
   <author>李四</author> 
   <text>板凳!</text> 
 </message> 
</response>

客户端处理

1.提交用户聊天信息
2.每隔一定时间发起查询数据库中聊天记录的请求

客户端代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>newDemo</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }

        #messagewindow {
            height: 250px;
            border: 1px solid;
            padding: 5px;
            overflow: auto;
        }

        #wrapper {
            margin: auto;
            width: 438px;
        }
    </style>
</head>

<body>

    <div id="wrapper">
        <p id="messagewindow"><span id="loading">加载中...</span></p>
        <form id="chatform" action="#">
            姓名： <input type="text" id="author" size="50" /><br />
            内容： <input type="text" id="msg" size="50" /> <br />
            <input type="submit" value="发送" /><br />
        </form>
    </div>
    <!--   引入jQuery -->
    <script src="../scripts/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        //<![CDATA[
        $(function () {
            //定义时间戳
            timestamp = 0;
            //调用更新信息函数
            updateMsg();
            //表单提交
            $("#chatform").submit(function () {
                $.post("backend.php", {
                    message: $("#msg").val(),
                    name: $("#author").val(),
                    action: "postmsg",
                    time: timestamp
                }, function (xml) {
                    //清空信息文本框内容
                    $("#msg").val("");
                    //调用解析xml的函数
                    addMessages(xml);
                });
                return false; //阻止表单提交
            });
        });
        //更新信息函数，每隔一定时间去服务端读取数据
        function updateMsg() {
            $.post("backend.php", {
                time: timestamp
            }, function (xml) {
                //移除掉 等待提示
                $("#loading").remove();
                //调用解析xml的函数
                addMessages(xml);
            });
            //每隔4秒，读取一次.
            setTimeout('updateMsg()', 4000);
        }
        //解析xml文档函数，把数据显示到页面上
        function addMessages(xml) {
            //如果状态为2，则终止
            if ($("status", xml).text() == "2") return;
            //更新时间戳
            timestamp = $("time", xml).text();
            //$.each循环数据
            $("message", xml).each(function () {
                var author = $("author", this).text(); //发布者
                var content = $("text", this).text(); //内容
                var htmlcode = "<strong>" + author + "</strong>: " + content + "<br />";
                $("#messagewindow").prepend(htmlcode); //添加到文档中
            });
        }
        //]]>
    </script>

</body>

</html>

在这里插入图片描述

数据库访问不了，哎，小白弄了一天了，确实是一头雾水，等以后学到数据库和后端语言在回来改正！！！