无为清净楼资源网

Ajax基础详解教程(二)
网络编程 2024/11/16 佚名
3 2
无为清净楼资源网 Design By www.qnjia.com

在上篇文章给大家介绍了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.其他的大家私下自行查阅。这里可以看到。

Ajax基础详解教程(二)

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

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详解

                                     

                                
无为清净楼资源网 Design By www.qnjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
www.qnjia.com 无为清净楼资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/16

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接