文章目录
AJAX介绍
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
使用AJAX的五个步骤
- 创建一个异步对象
var xmlhttp = new XMLHttpRequest(); - 设置请求方式和请求地址
open()规定请求的类型、URL 以及是否异步处理请求，参数详细解释
method：请求的类型；GET 或 POSTurl：文件在服务器上的位置async：true（异步）或false（同步）
- 发送请求
xmlhttp.send(); - 监听状态的变化
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
console.log('已接收到服务器返回的数据');
} else {
console.log('没有接收到服务器返回的数据');
}
}
- 处理返回的结果
获取服务器响应数据
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的responseText或responseXML属性。
- 如果来自服务器的响应并非 XML，请使用
responseText属性。
responseText属性返回字符串形式的响应 - 如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用
responseXML属性
IE浏览器中的AJAX
IE5、IE6浏览器中关于ajax的使用主要有两个问题：创建异步对象和GET缓存问题
IE创建异步对象
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");
}
IE浏览器GET缓存问题
IE浏览器在第一次获取某个URL的值后，如果该URL的名字不改变，则无论内容如何修改，IE都是获取的第一次获取到的值。
为了避免这种情况，请向 URL 添加一个唯一的 ID：
xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true); xmlhttp.send();
AJAX代码封装
我们可以将上面的五个步骤封装为一个函数，方便日后使用
需求：
- 解决IE5、IE6创建异步对象兼容性问题
- 解决IE5、IE6的GET缓存问题
- 解决GET传值问题
- 新增响应超时判断功能
- 若请求地址URL出现中文时需自动转换
<script>
//创建一个对象转字符串函数，方便GET传值
function objToStr(obj) {
//将随机数放到对象的末尾一起转换，防止IE的GET缓存
obj.t = Math.random();
var res = [];
for (var key in obj) {
//避免URL出现中文，此处进行转码
res.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
}
return res.join('&');
}
/*
*该函数需要传递五个参数
*@param1 url：请求地址
*@param2 obj：GET传的data内容，以对象类型传递
*@param3 timeout：请求最大等待时间
*@param4 success：请求成功后执行的函数
*@param5 error：请求失败后执行的函数
*/
function ajax(url, obj, timeout, success, error) {
var str = objToStr(obj);
var xmlhttp, timer;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open('GET', url + '?' + str, true);
xmlhttp.send();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
success(xmlhttp);
} else {
error(xmlhttp);
}
}
//如果用户传入了timeout参数，则开始计时
if (timeout) {
timer = setInterval(function () {
console.log('请求中断');
xmlhttp.abort(); //中断请求
clearInterval(timer);
}, timeout)
}
}
//当触发btn的点击事件后，执行我们封装的ajax函数
var btn = document.querySelector('button');
btn.onclick = function () {
ajax('data.php', {
'username': 'wsc',
'age': '18'
}, 3000, function (xmlhttp) {
console.log(xmlhttp.responseText);
}, function (xmlhttp) {
console.log('error');
})
}
</script>
探讨: 如何在改变传入参数顺序的情况下也不影响该函数使用？
答：使用对象来传参即可，我们本来需要传递五个参数，如果更改了参数顺序会导致传参混乱，如果我们将这五个参数以一个对象的形式传递进去，函数内部调用参数的时候使用对象.属性名就可以调用该参数
AJAX的POST请求方式
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
注意：send()传输数据的时候，key和value与等号之间不能有空格
JQuery中的AJAX
<script>
$(function () {
$('button').click(function () {
$.ajax({
type: 'GET',
url: 'data.php',
success: function (xhr) {
console.log(xhr);
//xhr是success方法的一个参数，就是原生的XMLHttpRequest对象
}
})
})
})
</script>
使用AJAX实现点击按钮切换商品内容
html部分
<body>
<div class="square_big">
<span class="title">商品标题名称</span>
<div class="square_small">
<img src="" alt="">
</div>
<span class="info">商品描述信息</span>
<ul>
<li>女装</li>
<li>男装</li>
<li>阴间</li>
</ul>
</div>
<script>
$(function () {
$('ul li').click(function () {
let product = $(this).text();
$.ajax({
url: 'data.php',
type: 'get',
data: 'product=' + product,
success: function (xhr) {
let res = xhr.split('|');
$('.title').text(res[0]);
$('.info').text(res[1]);
$('img').attr('src', res[2]);
}
})
})
})
</script>
</body>
php部分
<?php
$product = array('女装' => array(
'title' => '甜美女装', 'info' => '小可爱专用', 'image' => 'images/1.jpg'
), '男装' => array(
'title' => '海澜之家', 'info' => '男人的衣柜', 'image' => 'images/2.jpg'
), '阴间' => array(
'title' => '阴间返祖', 'info' => '忘了爱', 'image' => 'images/3.jpg'
));
echo $product[$_GET['product']]['title'] . '|' . $product[$_GET['product']]['info'] . '|' . $product[$_GET['product']]['image'];
XML介绍
我们从后台返回数据的时候，之前都是返回一串字符串，中间手动添加’|'隔开，然后再通过split分隔成一个数组；但如果字符串本身就带有竖线呢？这样切割的时候就乱套了。
其实后端一般不会之间返回给我们一个字符串，而是返回给我们一个XML文件或者JSON
XML文件格式
XML 被设计用来传输和存储数据。
HTML 被设计用来显示数据。
<?xml version='1.0' encoding='utf-8' ?> //第一行必须是这个
//必须有个根标签包围， 根标签随便起名，所有的数据都必须写到根标签中
<dog>
<username>王思聪</username> //每一条数据都要放到一对双标签中，取名随意
<age>18</age>
</dog>
以上就是我给XML添加了两条数据，一条数据是username，一条数据是age
获取XML数据的案例
我们假设就从上面这个XML文件中获取username和age两条数据
- ajax代码编写
<script>
$(function () {
$('button').click(function () {
$.ajax({
url: 'data.php',
type: 'get',
success: function (xhr) {
console.log(xhr.querySelector('name').innerHTML);
}
})
})
})
</script>
注意url依然是php文件
- php代码编写
<?php
//jquery的AJAX中的success:function (xhr)会自动判断返回的是xml文件还是普通数据，如果是xml文件则会接收到document格式，如果不标注则只会接受到字符串格式，所以我们要在响应头里配置
header('content-type:text/xml,charser:utf8');
echo file_get_contents('data.xml'); //输出XML文件
- 接受XML文件数据
因为PHP返回给我们的是一个XML文件，所以success: function (xhr)会接收到一个document格式的参数，我们就可以对这个参数做相应的操作来获取数据
JSON
JSON和XML类似，都是传输数据的
- 要使用JSON，我们要创建一个json文件，并在里面输入内容
{
//注意：必须使用双引号
"username": "wsc", //两条数据之间逗号隔开
"age": 18
}
这样一个JSON文件就创建好了，里面存储了两条数据：username和age
- 在ajax中，url的值依然指向php，而php使用
echo file_get_contents('data.json');输出一个json格式的数据，用ajax的xhr参数来接收 - 将接受到的json数据转换为一个js对象：
JSON.parse()；
也可以用JSON.stringify()方法将一个对象转换成一个json数据
补充方法：eval()可以将非标准的json数据（没有引号）转换成对象 - 既然已经转换成了对象格式，那我们便可以尽情使用了
Cookie
cookie默认的生命周期是一次会话（浏览器关闭）
但我们可以通过设置cookie的expires属性来控制它的过期时间
let date = new Date(); //创建一个日期对象date
date.setDate(date.getDate()+1); //让date对象的时间向后加一天
document.cookie = 'age=18;expires=' + date.toUTCString() + ';';//设置cookie过期时间为date对象的时间
注意：
- cookie一次只能设置一条数据
- cookie保存数量限制在20~50条数据，不同的浏览器保存cookie数量不同
- cookie大小限制在4KB
- cookie作用范围：同一个浏览器下的同级路径与子级路径可以使用
如果想让上级路径也可以使用cookie，可以在添加cookie的时候增加一条属性：document.cookie:"name=wsc;path=/;"; - 如果同一个域名下的二级域名不同，两者之间也无法共享cookie，此时需要再添加一条domain属性，其值为一级域名：
document.cookie="name=wsc;path=/;domain=127.0.0.1;";
哈希Hash
为网页添加一个Hash：window.location.hash = 5;
此时网页后面会多了一个井号和数字5：http://localhost/#5
获取Hash：直接输出window.location.hash即可
无论如何刷新页面，都不会消除Hash
可以被用来保存当前所选页码，在刷新后依然停留在该页码：
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
