沐晴又来更新啦,话说我们上回讲到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?username=沐晴&age=21',true);

后台代码不变

<?php
header('content-type:text/html;charset="utf-8"'); //设置编码格式,以及文档类型
error_reporting(0); $username = $_GET['username'];//获取get请求方式的数据
$age = $_GET['age']; echo "你的名字:{$username},年龄:{$age}"; //输出内容
复制代码

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

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

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

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

虽然后台代码变了,但是GET请求访问网址依然是 1.get.php?username=沐晴&age=21,所以后台会去浏览器缓存找,结果弹出的还是原来的。大家可以自行测试。

所以,这个时候我们需要解决缓存问题。既然访问网址不变的话会去找缓存,那么我们让网址一直变不就好了。所以我们可以在后面加个一直变化的变量,比如系统事件,或者加一个随机数都行,像下面这样:

xhr.open('get','1.get.php?username=沐晴&age=21&'+new.Date.getTime(),true);

这样就不会存在缓存问题了。有些人会这样写,会在后面给它起个名字t,这个时候如果后台也有个变量叫t,可能就会出问题了,所以不是很推荐。

xhr.open('get','1.get.php?username=沐晴&age=21&t='+new.Date.getTime(),true);

post 请求

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

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

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

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

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

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

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

<?php
header('content-type:text/html;charset="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>
window.onload = function() {
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','getNews.php',true);
xhr.send();
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
//alert( xhr.responseText ); 后端传来的格式是一个数组里面很多条json 自己可以测试下
var data = JSON.parse( xhr.responseText ); // 将后台获取的内容转为json类型 每一个json里面有两个键:title和date
var oUl = document.getElementById('ul1'); //获取显示新闻列表的节点
var html = '';
for (var i=0; i<data.length; i++) { // 循环所有的json数据,并把每一条添加到列表中
html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
}
oUl.innerHTML = html; //把内容放在页面里
} else {
alert('出错了,Err:' + xhr.status);
}
} } }
}
</script>
</head> <body>
<input type="button" value="按钮" id="btn" />
<ul id="ul1"></ul>
</body>
</html>
<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0); $news = array(
array('title'=>'女总理默克尔滑雪时摔倒 骨盆断裂','date'=>'2014-1-6'),
array('title'=>'驻英外交官撰文互称对方国家为"伏地魔"','date'=>'2014-1-6'),
array('title'=>'安倍:望与中国领导人会面 中方:你关闭了大门','date'=>'2014-1-6'),
array('title'=>'揭秘台湾驻港间谍网运作 湖北宜昌副市长被查','date'=>'2014-1-6'),
array('title'=>':嫦娥三号是货真价实的中国创造','date'=>'2014-1-6'), ); echo json_encode($news);

好了今天的Ajax就唠到这,希望大家有所收获,如果有错误的希望大家指正,看到好多人看头像进来的,伦家真是不知道说什么,还是希望大家能理性多提点意见拉拉,下次会讲下对于Ajax的封装,以及一些实际应用。不见不散啦

Ajax基础详解2的更多相关文章

  1. 史上最全的Ajax基础详解

    同步请求和异步请求 先解释一下同步和异步的概念: 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯 ...

  2. Ajax基础详解1

    Ajax也是前端必备技能了,学习任何语言,都需要以理论为基础的大量实践才能真正学会,之前学了Ajax很多遍,因为缺乏大量实践,总是会忘.所以不实践是失败之母...当然理论基础也很重要啦,今天谈谈我对A ...

  3. $.ajax()方法详解 ajax之async属性 【原创】详细案例解剖——浅谈Redis缓存的常用5种方式(String,Hash,List,set,SetSorted )

    $.ajax()方法详解   jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Str ...

  4. Dom探索之基础详解

    认识DOM DOM级别 注::DOM 0级标准实际并不存在,只是历史坐标系的一个参照点而已,具体的说,它指IE4.0和Netscape Navigator4.0最初支持的DHTML. 节点类型 注:1 ...

  5. AJAX请求详解 同步异步 GET和POST

    AJAX请求详解 同步异步 GET和POST 上一篇博文(http://www.cnblogs.com/mengdd/p/4191941.html)介绍了AJAX的概念和基本使用,附有一个小例子,下面 ...

  6. $.ajax()常用方法详解(推荐)

    AJAX 是一种与服务器交换数据的技术,可以在补充在整个页面的情况下更新网页的一部分.接下来通过本文给大家介绍ajax一些常用方法,大家有需要可以一起学习. 1.url: 要求为String类型的参数 ...

  7. 触碰jQuery:AJAX异步详解

    触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...

  8. jQuery调用AJAX异步详解[转]

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

  9. jquery中的ajax方法详解

    定义和用法ajax() 方法通过 HTTP 请求加载远程数据.该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XML ...

随机推荐

  1. 2013MPD上海6.23 PM 光耀:读心术,用户心理的产品之道

    创新的前提是:制度与组织的创新!!!!!!!!!!!!!! 光耀:腾讯互联网业务产品经理(腾讯公司互联网业务系统产品经理.在电子商务.社会化媒体等方面有深入研究.参与腾讯多个重要项目产品工作) 什么是 ...

  2. DevExpress GridControl使用方法总结(转)

    一.如何解决单击记录整行选中的问题 View->OptionsBehavior->EditorShowMode 设置为:Click 二.如何新增一条记录 (1).gridView.AddN ...

  3. HDU 4043 FXTZ II (组合数学-排列组合)

    FXTZ II Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Su ...

  4. IOS版本被拒的经历

    IOS版本被拒的经历: 1,登陆方式依赖外部平台 因为我们的APP是只用微博登陆,想做成类似meerkat类型的,也能各种消息都同步微博. 结果当然行不通,这个确实是不听好人言,网上多个人都说过这个问 ...

  5. TSQL点滴

    Q1.什么是bookmark lookup? 非聚集索引中叶结点存储的是index keyword 和 rowid(heap table) 或 clusterindex key. 如果查询使用了非聚集 ...

  6. js制作倒计时效果

    该程序可以计算任意指定的两个日期中间的差值. 本例子的指定日期是2017年1月1日,当前时间是2016年10月21日:计算它们之间的差值,在网页上显示如图所示: 关键部分代码: var nowtime ...

  7. Golang 实现简单的滚动读取文本更新

    这个小程序要实现的效果,简单地说,就是将目标文件的内容读取输出到终端,并且目标文件并不是静态的,而是随时会添加新的内容.我们的目标就是一旦目标文件添加了新的内容,就把它读取出来并且显示到终端上. 实现 ...

  8. UESTC 917 方老师的分身IV --求欧拉路径

    判断欧拉路径是否存在及求出字典序最小的欧拉路径问题(如果存在). 将字符串的第一个字母和最后一个字母间连边,将字母看成点,最多可能有26个点(a-z),如果有欧拉路径,还要判断是否有欧拉回路,如果有, ...

  9. redis 一二事 - 搭建集群缓存服务器

    在如今并发的环境下,对大数据量的查询采用缓存是最好不过的了,本文使用redis搭建集群 (个人喜欢redis,对memcache不感冒) redis是3.0后增加的集群功能,非常强大 集群中应该至少有 ...

  10. 使用Unity开发Android的几种调试方法

    前言 本文举例几种Android 调试的方法(PS:我是通过unity引擎来开发安卓游戏) Eclipse + adt 查看LOG 1.为Eclipse 装上adt 插件 2.打开Eclipse 的L ...