Ajax基础详解教程(二)

站长资源 2024/11/24 佚名

2 0 1

在上篇文章给大家介绍了Ajax基础详解教程(一)，讲到Ajax中open方法的第三个参数异步和同步的问题，今天呢，就来继续往下唠，先接着上回的代码

var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject(‘Microsoft.XMLHTTP');
}
xhr.open('get','1.txt',true); //设置请求信息 
xhr.send();//提交请求
//等待服务器返回内容 
xhr.onreadystatechange = function() { 
if ( xhr.readyState == 4 ) { //如果内容响应成功，并解析完成
alert( xhr.responseText ); //弹出内容 
} 
}
}

下面我们就讲到，xhr.send()；这一句呢才是真正请求数据的，open方法只是设置了一些请求参数。

现在呢请求递交了，就等服务器回应了，这个时候Ajax的一个属性就要登场了，那就是 responseText ，ajax请求返回的内容都放在了这里面，而且不管你请求的内容是什么，这里存放的都是是字符串类型。

当然我们上文也提到了，要想用异步请求呢，这里需要条件判断才知道服务端对请求的内容是否响应完毕，这个时候另一个属性就要登场了，readyState，他代表着Ajax请求过程的不同的状态，参数如下：

0 （初始化）还没有调用open()方法
1 （载入）已调用send()方法，正在发送请求
2 （载入完成）send()方法完成，已收到全部响应内容
3 （解析）正在解析响应内容（因为收到的内容并不是人能看懂的内容，所以需要解析）
4 （完成）响应内容解析完成，可以在客户端调用了

由上我们可以得到，在状态2的时候已经回应了请求的内容了，但是这个内容我们人看不懂撒，机器才懂，所以就有3，帮我们解析这个内容，然后解析完成就变成4了，这个时候的内容，咱们前端就可以用了。

状态是有了，可咱们怎么能知道啥时候是啥状态呢，这个时候我们就要用到一个监控状态的事件了onreadystatechange事件，当状态值改变的时候触发会触发这个事件，所以当状态为4的时候我们再弹出内容。

上面的代码基本已经了解了原理，不过当然不是最完善的，这个时候，我们虽然监控到了状态，响应了内容，但是内容不一定就是对的呀，比如可能内容出错了，可能我们请求了一个不存在的页面，这个时候readyState是无法判断错误的，我们需要知道内容是否正常，这个时候另一个属性 status属性就登场了，它代表的不是Ajax状态，而是服务器(请求资源)的状态， http状态码。状态码有很多，其中比较出名的就是200，成功状态码，和404 Not Found.其他的大家私下自行查阅。这里可以看到。

所以我们的代码要做进一步的改进

var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.open('get','1.txt',true); //设置请求信息 
xhr.send();//提交请求
//等待服务器返回内容 
xhr.onreadystatechange = function() { 
if ( xhr.readyState == 4 ) { 
if(xhr.status == 200) {//如果响应成功，并且服务器相应内容正确
alert( xhr.responseText );//弹出内容 
}else{alert('出错了' + xhr.status); //否则告知出错并弹出错误原因
} 
}
}

Ajax的大概流程就是这样的。当然还存在一些细节方面的问题需要注意的，继续往下看把。

工作当中向后端传递数据存在的问题：

GET请求：

1 缓存问题：后台更改了因网址未变所以会去缓存提取内容而不是后台

来看个栗子：假如我们要点击按钮弹出名字和年龄，因为GET请求是通过数值串连然后在网址传递数据的，所以我们的open方法可以直接这样写：

xhr.open('get','1.get.php"htmlcode">

<"utf-8"'); //设置编码格式，以及文档类型
error_reporting(0);
$username = $_GET['username'];//获取get请求方式的数据
$age = $_GET['age'];
echo "你的名字：{$username}，年龄：{$age}"; //输出内容

现在点击肯定会弹出你的名字沐晴，年龄21 了。

这个时候呢，浏览器会有一个缓存，如果下次访问相同的网址，就会从缓存里取。

比如我现在想弹出，欢迎你，你的名字沐晴，年龄21，

echo "欢迎，你的名字：{$username}，年龄：{$age}"; //输出内容

虽然后台代码变了，但是GET请求访问网址依然是 1.get.php"htmlcode">

xhr.open('get','1.get.php"htmlcode">

xhr.open('get','1.get.php"background-color: #ffff00">post 请求


1 上节课我们知道，在表单里面传统方式POST请求的内容是放在请求头里的，那么Ajax是放在哪里的呢？


post 数据放在send里面作为参数传递。


2 还有一点是，我们上次我们知道表单里面的第三个参数：enctype: 提交的数据格式，默认是application/x-www-form-urlencoded，但是在Ajax中，你不写就没有，没有默认值，所以我们需要在请求头里面指定提交的数据格式，不然浏览器不知道用哪种格式解析。


所以post请求需要设置下面这两句


xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send('username=沐晴&age=21&'); 


无缓存问题，因为单单是往服务器提交数据，提交数据是不会被缓存的，获取数据才会被缓存。这就是web的机制。


前面讲的都是请求数据，现在来看一下后端接收请求，然后响应给我们的内容。


先看看后端对数据的处理：后端的数据类型也是很多的，我们不能直接把这样的数据给前端吧，所以后端也需要做一定的处理，它有个方法 json_encode 可以根据数据类型不同，然后输出不同格式。看下面的栗子




<"utf-8"');
error_reporting(0);
$arr1 = array('le','mo'); // 索引类型的数据
$arr2 = array('username'=>'le','age'=>32); // 2 对应关系的数据
echo json_encode($arr1); // ["le","mo"] 索引类型 输出为数组格式
echo json_encode($arr2); // {"username":"le","age":32} 对应关系的数据 输出为json格式 


虽然后端输出的内容格式上是数组和json但是我之前提到过 alert( xhr.responseText );//这里弹出的可都是字符串类型，所以尽管格式上看着是json和数组，但实际的数据类型还是字符串。


所以我们前端要对这些字符串进行转换。这个时候就用到了两个方法


1 stringify() : 把json对象转化成字符串 转换后的字符串是严格的json格式


2 parse() : 把字符串转成对象，可以把后端返回的字符串 转成JSON格式，对于json,只能转换严格json格式的字符串，字符串的键 比较用双引号括起来 像这样 {"username":"le","age":32}


下面来看个实际的案例：


需求：点击页面按钮，实现页面不刷新，在下面显示新闻列表 看注释应该能看懂




<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8">
<title>无标题文档</title>
<!--<script src="/UploadFiles/2021-04-02/jquery.js">

好了今天的Ajax就唠到这，希望大家有所收获，如果有错误的希望大家指正，看到好多人看头像进来的，伦家真是不知道说什么，还是希望大家能理性多提点意见拉拉，下次会讲下对于Ajax的封装，以及一些实际应用。
以上所述是小编给大家介绍的Ajax基础详解教程(二)的全部叙述，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

                                
                                
                                    ajax详解

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“Ajax基础详解教程(二)”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月24日

Ajax基础详解教程(二)

Ajax基础教程之封装(三)

将xml文件作为一个小的数据库,进行学生的增删改查的简单实例

评论“Ajax基础详解教程(二)”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接