AJax技术

Ajax基础详解教程(一)(2)

字号+ 作者:H5之家 来源:H5之家 2017-04-09 12:01 我要评论( )

phpheader('content-type:text/html;charset="utf-8"');error_reporting(0);$username = $_POST['username'];//不同的请求方式方法不同,$_POST方法专门用来获取POST方式请求的数据 $age = $_POST['age']; echo "你

<?php header('content-type:text/html;charset="utf-8"'); error_reporting(0); $username = $_POST['username'];//不同的请求方式方法不同,$_POST方法专门用来获取POST方式请求的数据 $age = $_POST['age']; echo "你的名字:{$username},年龄:{$age}";

1.输入页面,跟前面一样就没有截取,输出信息页面,我们可以看到,地址栏上已经没有用户信息了,但页面还是输出了用户信息。那从哪看出传递的过程呢?

其实在传递数据的过程中,浏览器还会向服务端(后台)发送一个请求头包含一些请求的信息(GET请求也有头部信息),我们打开开发者工具,找到网络就可以看到我们的请求,点进去就是具体内容,看上面的第二种图,可以看到一些请求信息,有请求的编码格式,还有请求地址等,具体可以自己私下了解。

我们看第三张图,可以看到请求的数据,上面的其实是浏览器已经按照某种格式输入的信息,下面的源代码才是实际传递的信息,可以看到串连的格式和GET请求是一样的,不过把用户名加密了,更加安全了。

由此我们可以知道

Post请求

1 数据的串连格式和Get请求是一样的

2 通过请求头信息 通过浏览器内部传输:

还有别的区别就是

3 传输数据量 Post理论上无限

4 可以传递多种数据类型(文本类型,二进制)

还有一定是后端获取数据格式不仅有 $_GET, $_POST还有一个 3 $_REQUEST 可以获取任何提交方式的数据 。

我们需要注意的是数据传输方式 和 数据获取方式 必须保持一致才能成功获取

关于Open方法的第一个参数提交方式就讲到这里,第二个地址先简单了解,下面来看第三个参数关于异步和同步。

同步:就是一种阻塞模式,比如代码var a =1 ;alert(a);这就是一种同步,必须执行了第一种var a =1,你才会弹出a的值。

缺点:一般当你后面的代码需要用到前面的东西的时候 适合用同步 ,但用的很少,因为后面的代码都要等前面,体验是不好的。

异步:就是一种非阻塞模式,最明显的例子,就是定时器,当我们写了一个30s后执行的定时器的时候,在30S内其实后面的代码是可以执行的,而不是过了30s后面代码才能执行,这就是一种异步。

缺点:当你后面的代码需要用到前面的东西的时候 如果用异步,那么后面的代码会在前面还没加载好就出来,可能会有问题。幸运的是我们可以解决。

解决:当你后面的代码需要用到前面的东西的时候,可以用条件判断来决定这些代码的执行,如果条件达成了就可以执行。

还拿上面的举个栗子

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()提交请求是需要时间的,所以必须要等到一定时间提交成功后,我们后面的才能正确获取到内容,所以这就是后面的代码正确执行,依赖于前面,但是如果用同步的话,我们后面那些不依赖这些前面代码的代码也没办法执行,体验就不好了,所以我们选择用异步,而对于这些依赖前面代码执行的代码,我们就进行判断

if ( xhr.readyState == 4 )就是判断如果数据响应到了,收到了,再弹出内容。(如果我们不判断,按照异步的原理,就会立马弹出来,获取数据需要时间,因为实际还没获取到数据,所以会弹出空,怕误解,所以这里我再强调下).

以上所述是小编给大家介绍的Ajax基础详解教程(一)的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • PHP 实现ajax Loading加载功能

    PHP 实现ajax Loading加载功能

    2017-04-07 14:03

  • 使用Ajax验证Knockout

    使用Ajax验证Knockout

    2017-04-07 14:02

  • AJAX中POST或GET传递中文字符乱码的解决办法

    AJAX中POST或GET传递中文字符乱码的解决办法

    2017-04-07 10:01

  • 什么是Ajax?Ajax的原理是什么?Ajax的核心技术是什么?Ajax的优缺

    什么是Ajax?Ajax的原理是什么?Ajax的核心技术是什么?Ajax的优缺

    2017-04-07 09:03

网友点评
a