Day43 插件、Ajax、JSON、扫雷
1. 插件
1.1 概述
插件是对功能的扩展 ,比如jQuery中没有的,或者是对已有的进行扩展,都是插件
不同的插件完成不同的功能,
jquery不可能包含所有的功能，我们可以通过插件扩展jquery的功能。
jquery有着丰富的插件，使用这些插件能给jquery提供一些额外的功能。
注意,如果需要引入的插件,是基于jQuery的插件,则我们再使用时,必须先引入jQuery,再引入插件,再进行编码
1.2 jQuery.color.js
Animate中,不能进行颜色操作,该插件就可以解决这个问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#dv{
width: 200px;
height: 200px;
background-color: red;
}
</style>
<script src="./js/jquery-1.11.1.min.js"></script>
<script src="./js/jquery.color.js"></script>
<script>
$(function(){
$("#btn").click(function(){
$("#dv").animate({
width:"300px",
'background-color':'green'
},500);
});
});
</script>
</head>
<body>
<button id="btn">按钮</button>
<div id="dv"></div>
</body>
</html>
只需要引入color的js 即可,否则颜色是不能动画设置的
1.3 jQuery.lazyload.js
很多网站都会用到‘图片懒加载’这种方式对网站进行优化，即延迟加载图片或符合某些条件才开始加载图片。
懒加载原理：浏览器会自动对页面中的img标签的src属性发送请求并下载图片。通过动态改变img的src属性实现。它可以延迟加载长页面中的图片在浏览器可视区域外，图片不会被载入，直到用户将页面滚动到它们所在的位置。
与图片预加载的处理方式相反，在包含很多大图片长页面中延迟加载图片可以加快页面加载速度，尤其是移动端。浏览器将会在加载可见图片之后即进入就绪状态，在淘宝商品详情页、漫画网站很多图片的情况下还可以帮助降低服务器负担。
<script src="jquery.min.js"></script>
<script src="jquery.lazyload.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 3000px;
}
</style>
<script src="./js/jquery-1.11.1.min.js"></script>
<script src="./js/jquery.lazyload.min.js"></script>
<script>
$(function(){
// 滚动条到图片的时候,就自动加载
$("img").lazyload();
});
</script>
</head>
<body>
<div></div>
<img data-original="./images/1.jpg" alt="">
</body>
</html>
1.4 日历插件
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js网页日期插件</title>
<script src="./js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/laydate.js"></script>
<script type="text/javascript">
$(function () {
laydate.skin('dahong');//切换皮肤，请查看skins下面皮肤库
$('#date').click(function () {
laydate({
elem: '#date',
format: 'YYYY年MM月DD日 hh:mm:ss',
festival: true, //显示节日
istime: true, // 显示时间
choose: function (datas) { //选择日期完毕的回调
// alert('得到：' + datas);
}
});
});
function a(){
x = 222;
}
// ---------
});
</script>
</head>
<body>
<input placeholder="请输入日期" readonly id='date' class="laydate-icon">
</body>
</html>
2. JS-Ajax
2.1 概述
2.1.1 老版本ajax请求
代web程序最初的目的就是将信息（数据）放到公共服务器上，让所有的网络用户都可以通过浏览器访问。
我们一般都是通过以下方式让浏览器发送服务器请求，获得服务器数据
1、地址栏输入地址
2、特定元素的href 或者src属性
3、表单提交
弊端：这些方案我们很难通过代码的方式进行编程，而且每次请求都会刷新网
2.1.2 什么是ajax
1、AJAX( Asynchronous JavaScript and XML)异步的 JavaScript 和 XML。
2、AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
3、AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
4、AJAX 可以使网页实现异步更新
5、AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
2.1.3 异步和同步
我们在使用 ajax 一般都会使用异步处理。
异步处理呢就是我们通过事件触发到 ajax，请求服务器，在这个期间无论服务器有没有响应，客户端的其他代码一样可以运行。
同步处理：我们通过实践触发 ajax，请求服务器，在这个期间等待服务器处理请求， 在这个期间客户端不能做任何处理。当 ajax 执行完毕才会继续执行其他代码。
同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事
异步: 请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕同步需要等待返回结果才能继续，异步不必等待，一般需要监听异步的结果
同步是在一条直线上的队列，异步不在一个队列上 各走各的
jquery 的 async:false,这个属性
默认是true：异步，false：同步。举例：
同步就是你叫我去吃饭，我听到了就和你去吃饭；如果没有听到，你就不停的叫，直到我告诉你听到了，才一起去吃饭。
异步就是你叫我，然后自己去吃饭，我得到消息后可能立即走，也可能等到忙完才去吃饭。
2.1.4 运行机制
2.2 代码模板
/**
* 1 获取ajax引擎对象 XMLHttpRequest
* 2 配置请求连接的URL,代表浏览器要发出的请求以及目的地,还有就是是否异步
* 这个请求不是直接发送,而是配置给ajax引擎,有它去发送
* 3 监视XMLHttpRequest对象的请求流程,根据不同的请求结果,做出不同的响应
* 4 发送请求,上面都是准备,这里才是真正的发送
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function () {
var btn = document.getElementById("btn");
btn.onclick = function () {
/**
* 1 获取ajax引擎对象 XMLHttpRequest
* 2 配置请求连接的URL,代表浏览器要发出的请求以及目的地,还有就是是否异步
* 这个请求不是直接发送,而是配置给ajax引擎,有它去发送
* 3 监视XMLHttpRequest对象的请求流程,根据不同的请求结果,做出不同的响应
* 4 发送请求,上面都是准备,这里才是真正的发送
*/
// 1 获取ajax引擎对象 XMLHttpRequest
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2 配置请求连接的URL
xmlhttp.open("GET", "text.txt", true);
// 3 监听请求状态
xmlhttp.onreadystatechange = function () {
// 为4 和 200 说明请求成功
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("saveData").innerHTML = xmlhttp.responseText;
}
}
// 4 发送请求
xmlhttp.send();
// post请求 如果需要传递参数 必须设置请求头
// xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 参数 键=值&键=值
// xmlhttp.send("fname=Bill&lname=Gates");
}
}
</script>
</head>
<body>
<button id="btn">获取数据</button>
<div id="saveData"></div>
<input type="text" name="" id="">
</body>
</html>
2.3 代码应用
更改URL和请求方式,以及是否异步
// 2 配置请求连接的URL
xmlhttp.open("GET", "test.xml", true);
更改请求成功或者失败后要做的事
// 为4 和 200 说明请求成功
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
如果是get请求,这里不用动,如果是post请求 就需要更改
// 4 发送请求
xmlhttp.send();
更改为这样
xmlhttp.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
xmlhttp.send(“fname=Bill&lname=Gates”);
只需要更改传递的参数即可
// post请求 如果需要传递参数 必须设置请求头
// xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 参数 键=值&键=值
// xmlhttp.send("fname=Bill&lname=Gates");
2.4 注意
不支持file协议
我们应该这样运行
右键,浏览器打开
2.5 responseText和responseXML
2.5.1 responseText
responseText 是可以接收任何数据的,因为数据都是以字符串进行传递,不管你是什么格式,用responseText接收到,都是字符串
比如接收到的是json/xml等 我们一般会再次把这个字符串转换为对应的对象进行操作
大部分情况我们都是用json进行操作
2.5.2 responseXML
如果返回的是xml格式的字符串,并且我们需要以DOM的方式来操作这些XML标签,那么就直接使用responseXML 会自动把XML格式的字符串转换为对象
<users>
<user>
<id>1</id>
<name>张三</name>
</user>
<user>
<id>2</id>
<name>李四</name>
</user>
</users>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function () {
var btn = document.getElementById("btn");
btn.onclick = function () {
/**
* 1 获取ajax引擎对象 XMLHttpRequest
* 2 配置请求连接的URL,代表浏览器要发出的请求以及目的地,还有就是是否异步
* 这个请求不是直接发送,而是配置给ajax引擎,有它去发送
* 3 监视XMLHttpRequest对象的请求流程,根据不同的请求结果,做出不同的响应
* 4 发送请求,上面都是准备,这里才是真正的发送
*/
// 1 获取ajax引擎对象 XMLHttpRequest
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2 配置请求连接的URL
xmlhttp.open("GET", "test.xml", true);
// 3 监听请求状态
xmlhttp.onreadystatechange = function () {
// 为4 和 200 说明请求成功
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
// 得到XML格式的字符串
console.log(xmlhttp.responseText);
// 得到DOM对象
console.log(xmlhttp.responseXML);
// 得到DOM对象,最大的是Users
var xmlObj = xmlhttp.responseXML;
// 获取users下的所有user
var users = xmlObj.getElementsByTagName("user");
console.log(users);
// 遍历user,获取里面的ID和Name标签内容
for(var i = 0; i < users.length; i++){
// 获取ID标签对象
var idObj = users[i].getElementsByTagName('id')[0];
// 获取name标签对象
var nameObj = users[i].getElementsByTagName("name")[0];
// 获取ID标签中的内容
var idValue = idObj.innerHTML;
var nameValue = nameObj.innerHTML;
// 拼接格式
var str = idValue+" : "+nameValue+" <br>";
document.getElementById("saveData").innerHTML += str;
}
// document.getElementById("saveData").innerHTML = xmlhttp.responseText;
}
}
// 4 发送请求
xmlhttp.send();
// post请求 如果需要传递参数 必须设置请求头
// xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 参数 键=值&键=值
// xmlhttp.send("fname=Bill&lname=Gates");
}
}
</script>
</head>
<body>
<button id="btn">获取数据</button>
<div id="saveData"></div>
<input type="text" name="" id="">
</body>
</html>
2.6 案例-三级联动
思路 :
1 三个下拉列表,省,市,县
2 绑定onchange事件,发生更改触发
3 打开页面默认加载所有省份,并显示在省下拉列表中
4 当省下拉列表发生更改时,加载对应的城市,显示在市下拉列表中
5 当市下拉列表发生更改时,加载对应的区县,并显示在县下拉列表中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = init;
function init() {
/**
* 思路 :
1 三个下拉列表,省,市,县
2 绑定onchange事件,发生更改触发
3 打开页面默认加载所有省份,并显示在省下拉列表中
4 当省下拉列表发生更改时,加载对应的城市,显示在市下拉列表中
5 当市下拉列表发生更改时,加载对应的区县,并显示在县下拉列表中
*/
// 打开页面默认加载所有省份,并显示在省下拉列表中
initProvince();
var pn = document.getElementById('province');
pn.onchange = getCities;
// 市下拉列表
var c = document.getElementById('city');
c.onchange = getCounties;
}
// 加载省
function initProvince() {
// 1 ajax引擎
var xhr = createXMLHttrRequest();
// 2 配置
xhr.open('GET', 'Area.xml', true);
// 3 监听
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// console.log(xhr.responseXML);
// 文档对象
var xmlDoc = xhr.responseXML;
// 获取省
var pns = xmlDoc.getElementsByTagName("province");
// 省下拉列表
var pn = document.getElementById('province');
// 遍历所有的省份,拼成option
// <option value="北京">北京</option>
var nodes = '';
for (var i = 0; i < pns.length; i++) {
var nameValue = pns[i].getAttribute('name');
nodes += '<option value="' + nameValue + '">' + nameValue + '</option>';
}
// 设置到省下拉列表中
pn.innerHTML += nodes;
}
}
// 4 发送请求
xhr.send();
}
// 省下拉列表事件,用于获取城市
function getCities() {
var c = document.getElementById('county');
// 清空原内容,只保留一个
c.options.length = 1;
// 市下拉列表
var c = document.getElementById('city');
// 清空原内容,只保留一个
c.options.length = 1;
// 如果点击的是北京 this.value 就是北京
// console.log(this.value);
var optionValue = this.value;
if (optionValue == 1) {
return;
}
// 1 ajax引擎
var xhr = createXMLHttrRequest();
// 2 配置
xhr.open('GET', 'Area.xml', true);
// 3 监听
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// console.log(xhr.responseXML);
// 文档对象
var xmlDoc = xhr.responseXML;
// console.log(xmlDoc.querySelector('province[name="'+optionValue+'"]'));
// 获取省
var pn = xmlDoc.querySelector('province[name="' + optionValue + '"]');
// 获取所有城市
var cs = pn.getElementsByTagName('city');
// <option value="北京">北京</option>
var nodes = '';
for (var i = 0; i < cs.length; i++) {
var nameValue = cs[i].getAttribute('name');
nodes += '<option value="' + nameValue + '">' + nameValue + '</option>';
}
// 设置到省下拉列表中
c.innerHTML += nodes;
}
}
// 4 发送请求
xhr.send();
}
// 市事件,加载区县
function getCounties() {
var c = document.getElementById('county');
// 清空原内容,只保留一个
c.options.length = 1;
// 如果点击的是北京 this.value 就是北京
// console.log(this.value);
var optionValue = this.value;
if (optionValue == 1) {
return;
}
// 1 ajax引擎
var xhr = createXMLHttrRequest();
// 2 配置
xhr.open('GET', 'Area.xml', true);
// 3 监听
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// console.log(xhr.responseXML);
// 文档对象
var xmlDoc = xhr.responseXML;
// console.log(xmlDoc.querySelector('province[name="'+optionValue+'"]'));
// 获取城市
var city = xmlDoc.querySelector('city[name="' + optionValue + '"]');
// 获取所有城市
var cs = city.getElementsByTagName('county');
// <option value="北京">北京</option>
var nodes = '';
for (var i = 0; i < cs.length; i++) {
var nameValue = cs[i].getAttribute('name');
nodes += '<option value="' + nameValue + '">' + nameValue + '</option>';
}
// 设置到省下拉列表中
c.innerHTML += nodes;
}
}
// 4 发送请求
xhr.send();
}
// 获取XMLHttpRequest对象
function createXMLHttrRequest() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
</script>
</head>
<body>
<select name="" id="province">
<option value="1">---请选择省份---</option>
</select>
<select name="" id="city">
<option value="1">---请选择城市---</option>
</select>
<select name="" id="county">
<option value="1">---请选择区县---</option>
</select>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = init;
var xmlDoc;
function init() {
/**
* 思路 :
1 三个下拉列表,省,市,县
2 绑定onchange事件,发生更改触发
3 打开页面默认加载所有省份,并显示在省下拉列表中
4 当省下拉列表发生更改时,加载对应的城市,显示在市下拉列表中
5 当市下拉列表发生更改时,加载对应的区县,并显示在县下拉列表中
*/
// 打开页面默认加载所有省份,并显示在省下拉列表中
initProvince();
var pn = document.getElementById('province');
pn.onchange = getCities;
// 市下拉列表
var c = document.getElementById('city');
c.onchange = getCounties;
}
// 加载省
function initProvince() {
// 1 ajax引擎
var xhr = createXMLHttrRequest();
// 2 配置
xhr.open('GET', 'Area.xml', true);
// 3 监听
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// console.log(xhr.responseXML);
// 文档对象
xmlDoc = xhr.responseXML;
// 获取省
var pns = xmlDoc.getElementsByTagName("province");
// 省下拉列表
var pn = document.getElementById('province');
// 遍历所有的省份,拼成option
// <option value="北京">北京</option>
var nodes = '';
for (var i = 0; i < pns.length; i++) {
var nameValue = pns[i].getAttribute('name');
nodes += '<option value="' + nameValue + '">' + nameValue + '</option>';
}
// 设置到省下拉列表中
pn.innerHTML += nodes;
}
}
// 4 发送请求
xhr.send();
}
// 省下拉列表事件,用于获取城市
function getCities() {
var c = document.getElementById('county');
// 清空原内容,只保留一个
c.options.length = 1;
// 市下拉列表
var c = document.getElementById('city');
// 清空原内容,只保留一个
c.options.length = 1;
// 如果点击的是北京 this.value 就是北京
// console.log(this.value);
var optionValue = this.value;
if (optionValue == 1) {
return;
}
// 获取省
var pn = xmlDoc.querySelector('province[name="' + optionValue + '"]');
// 获取所有城市
var cs = pn.getElementsByTagName('city');
// <option value="北京">北京</option>
var nodes = getOptions(cs);
// 设置到省下拉列表中
c.innerHTML += nodes;
}
// 市事件,加载区县
function getCounties() {
var c = document.getElementById('county');
// 清空原内容,只保留一个
c.options.length = 1;
// 如果点击的是北京 this.value 就是北京
// console.log(this.value);
var optionValue = this.value;
if (optionValue == 1) {
return;
}
// 获取城市
var city = xmlDoc.querySelector('city[name="' + optionValue + '"]');
// 获取所有区县
var cs = city.getElementsByTagName('county');
// <option value="北京">北京</option>
var nodes = getOptions(cs);
// 设置到省下拉列表中
c.innerHTML += nodes;
}
function getOptions(obj){
var nodes = '';
for (var i = 0; i < obj.length; i++) {
var nameValue = obj[i].getAttribute('name');
nodes += '<option value="' + nameValue + '">' + nameValue + '</option>';
}
return nodes;
}
// 获取XMLHttpRequest对象
function createXMLHttrRequest() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
</script>
</head>
<body>
<select name="" id="province">
<option value="1">---请选择省份---</option>
</select>
<select name="" id="city">
<option value="1">---请选择城市---</option>
</select>
<select name="" id="county">
<option value="1">---请选择区县---</option>
</select>
</body>
</html>
jQuery写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-1.11.1.min.js"></script>
<script>
$(function () {
var xmlDoc;
$.get('Area.xml', function (data) {
xmlDoc = data;
//找到省份
//根据xmlDoc获取的文档找到province对象，遍历
$(xmlDoc).find("province").each(function () {
//获取省份
var val = $(this).attr('name');
// console.log(val);
//拼接到省份下拉列表
// <option value="北京">北京</option> 格式
$('#province').append('<option value="' + val + '">' + val + '</option>');
});
});
//获取city
//点击省份获取city
$('#province').change(function () {
//清空下拉列表
$("#city option:gt(0)").remove();
$("#county option:gt(0)").remove();
var val = $(this).val();//获取省份
// console.log(val);
// 通过省份值找到city对象
$(xmlDoc).find("province[name='" + val + "'] city").each(function () {
//获取city值
var val = $(this).attr('name');
$('#city').append('<option value="' + val + '">' + val + '</option>');
});
});
//county
//点击city获取county
$('#city').change(function () {
//清空下拉列表
$("#county option:gt(0)").remove();
var val = $(this).val();//获取city
// console.log(val);
// 通过city值找到county对象
$(xmlDoc).find("city[name='" + val + "'] county").each(function () {
//获取county值
var val = $(this).attr('name');
$('#county').append('<option value="' + val + '">' + val + '</option>');
});
});
})
</script>
</head>
<body>
<select name="" id="province">
<option value="1">---请选择省份---</option>
</select>
<select name="" id="city">
<option value="1">---请选择城市---</option>
</select>
<select name="" id="county">
<option value="1">---请选择区县---</option>
</select>
</body>
</html>
3. jQuery-Ajax
3.1 概述
1、如果没有 jQuery，AJAX 编程还是有些难度的。
2、编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。
3、jQuery 提供多个与 AJAX 有关的方法。
4、通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
3.2 Load
jQuery load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
谁调用的这个方法,就把返回数据放入谁的里面
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示"外部内容加载成功！"，而如果失败，则显示错误消息：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-1.11.1.min.js"></script>
<script>
$(function(){
$("#btn").click(function(){
$("#content").load('text.txt');
// 把test.html文档,全部载入#content中
$("#content").load('test.html');
// 只加载dv
$("#content").load('test.html #dv');
$("#content").load('test.html #dv',function(data){
// 加载后的回调函数,data是加载的文件的整个文档对象
console.log(data);
});
});
});
</script>
</head>
<body>
<button id='btn'>获取数据</button>
<div id="content"></div>
</body>
</html>
3.3 Get
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
如需学习更多有关 GET 和 POST 以及两方法差异的知识，请阅读我们的 HTTP 方法 - GET 对比 POST。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-1.11.1.min.js"></script>
<script>
$(function(){
$("#btn").click(function(){
// 如果是xml data就是DOM对象,就等于使用responseXML获取
// 反之 就是字符串,等于 responseText 获取
// 第一个参数是URL , 第二个参数是成功之后的回调函数
$.get('test.html',function(data){
console.log(data);
});
});
});
</script>
</head>
<body>
<button id='btn'>获取数据</button>
</body>
</html>
3.4 Post
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-1.11.1.min.js"></script>
<script>
$(function(){
$("#btn").click(function(){
// 如果是xml data就是DOM对象,就等于使用responseXML获取
// 反之 就是字符串,等于 responseText 获取
// 第一个参数是URL ,第二个参数是传递的数据, 第三个参数是成功之后的回调函数
// 第一个参数必须写
$.post('test.html',{xxx:'222'},function(data){
console.log(data);
});
});
});
</script>
</head>
<body>
<button id='btn'>获取数据</button>
</body>
</html>
3.5 Ajax
ajax() 方法用于执行 AJAX（异步 HTTP）请求。
所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。
type:
要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。
async:
要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
cache:
要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。
data:
要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看 processData选项。对象必须为key/value格式，例如{foo1:“bar1”,foo2:“bar2”}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:[“bar1”,“bar2”]}转换为&foo=bar1&foo=bar2。
dataType:
要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。
complete：
要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。
function(XMLHttpRequest, textStatus){
this; //调用本次ajax请求时传递的options参数
}
success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
(1)由服务器返回，并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //调用本次ajax请求时传递的options参数
}
error:
要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：
function(XMLHttpRequest, textStatus, errorThrown){
//通常情况下textStatus和errorThrown只有其中一个包含信息
this; //调用本次ajax请求时传递的options参数
}
contentType：
要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。
常用的属性 :
Url,async,type,success,error,data
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-1.11.1.min.js"></script>
<script>
$(function () {
var xmlDoc;
$("#btn").click(function () {
$.ajax({
// 请求的路由(就是到哪里去)
url: 'Area.xml',
// 请求类型,POST/GET
type: 'POST',
// 是否异步,true 异步,false 同步
async: true,
// 传递的数据
data:{xxx:2,s:1},
// 成功之后的回调函数
success: function (data, textStatus) {
// 因为请求的是XML 所以得到文档对象,其他得到字符串
console.log(data);
xmlDoc = data;
},
// 失败之后的回调函数
error: function (xhr) {
console.log("加载失败 : "+xhr.status);
},
});
// 如果ajax之外,需要用到ajax中加载的数据,或者其他操作的数据
// 则 需要同步编程,否则导致这里使用不了,未赋值
console.log(xmlDoc);
});
});
</script>
</head>
<body>
<button id='btn'>获取数据</button>
</body>
</html>
4. JSON
4.1 概述
JSON: JavaScript Object Notation(JavaScript 对象表示法)
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小、更快，更易解析。
JSON 是轻量级的文本数据交换格式
JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。
JSON 具有自我描述性，更易理解
4.2 语法
JSON 语法是 JavaScript 对象表示语法的子集。
数据在名称/值对中、数据由逗号分隔、大括号保存对象、中括号保存数组。
名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值：
Var json = { ‘name’:’张三’, ‘age’:18 };
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-1.11.1.min.js"></script>
<script>
$(function(){
// JSON对象 和JS对象的字面量写法是一致的,不过一般key我们放到''中
var json = {
// 值为字符串,需要加 ''
'name':'张三',
// 值是数字 不用加 ''
'age':18,
// 值是 boolean / null 等 也不用加 ''
'sex':true
};
// 访问属性
console.log(json.name);
// 设置值
json.name='李四';
// 访问属性
console.log(json['name']);
// 设置值
json['name']='王五';
// 添加新属性
json.id=1;
json['addr']='石家庄';
});
</script>
</head>
<body>
</body>
</html>
4.3 JSON数组
JSON 数组在中括号中书写。
JSON 中数组值必须是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
JavaScript 中，数组值可以是以上的 JSON 数据类型，也可以是 JavaScript 的表达式，包括函数，日期，及 undefined。
对象属性的值可以是一个数组：
var jsons = [
{
'name':'张三1',
'age':18
},{
'name':'张三2',
'age':18
},{
'name':'张三3',
'age':18
}
];
var json = {
'name':'张三',
'like':['篮球','体育','吃','玩']
};
console.log(json.like[0]);
4.4 JSON转字符串
因为数据传递都是以字符串进行传递,如果我们想要把JSON传递到后端,需要先转换为对应的JSON格式的字符串,然后传递该字符串即可
var json = {
'name':'张三',
'age':15
};
// object
console.log(typeof json);
// 转换为字符串
var jsonStr = JSON.stringify(json);
// string
console.log(typeof jsonStr);
4.5 字符串转JSON
如果后端传递到页面的是一个JSON格式的字符串,我们需要把该字符串转换为JSON对象,方便我们获取数据等操作
// 转换为JSON对象
var obj = JSON.parse(jsonStr);
// object
console.log(typeof obj);
$.get('person.txt',function(data,status){
console.log(status);
// string
console.log(typeof data);
if(status == 'success'){
// 转对象 该字符串,必须是JSON格式
var jsonObj = JSON.parse(data)
// object
console.log(typeof jsonObj);
console.log(jsonObj.name);
}
});
4.6 eval
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-1.11.1.min.js"></script>
<script>
var t = '2+3';
// 2+3
console.log(t);
// eval : 可以直接运算字符串中的运算操作
// 5
console.log(eval(t));
// 同时eval 也可以把JSON数组格式的字符串转换为JSON数组对象
var str = "[{name:1},{name:2}]";
// 转换为数组JSON对象
var jsons = eval(str);
console.log(jsons);
// 访问数据
console.log(jsons[0].name);
$.get('person.txt',function(data,status){
console.log(status);
// string
console.log(typeof data);
if(status == 'success'){
// 转对象 该字符串,必须是JSON数组格式
var jsonObj = eval(data)
console.log( jsonObj);
console.log(jsonObj[0].name);
}
});
$.get('https://www.baidu.com/s?wd=java',function(data){
console.log(data);
});
</script>
</head>
<body>
</body>
</html>
4.7 JSONP
Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
为什么我们从不同的域（网站）访问数据需要一个特殊的技术( JSONP )呢？这是因为同源策略。
同源策略，它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。
如客户想访问 :
https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction
假设客户期望返回数据：[“customername1”,“customername2”]。
真正返回到客户端的数据显示为: callbackFunction([“customername1”,“customername2”])。
只能通过请求访问自己域中的数据,访问其他域中的,就会被终止,除非对应的服务器中设置了可以跨域访问才行
后端可以通过
80
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
