标音小常识ajax同步,简单的异步AJAX页面交互

何为异步呢？

普通的表单submit提交按钮是同步提交并且是刷新页面提交，这样对用户体验很不好，当然也是在不同的情况下不好。

异步AJAX简单来说就是不刷新页面将指定信息发送到指定文件中然后返回并用js传递到前端页面中，则达到异步(不)刷新页面的效果。

如果你的服务器很卡，比如用户点击后发送，没有快速返回的话，用户将会以为程序出现了问题，则直接关闭页面~

AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求)，这样就可使网页从服务器请求少量的信息，而不是整个页面。

异步ajax(Asynchronous Javascript And XML) 主要就是使用了JS的一个叫做XMLHttpRequest的一个类

现在的绝对多数浏览器都增加了对XmlHttp的支持，IE中使用ActiveXObject方式创建XmlHttp对象，其他浏览器如：Firefox、Opera等通过window.XMLHttpRequest来创建xmlhttps对象。

AJAX传递的信息可以在firebug的网络中查看，一般都是使用POST或者GET请求

下面我用代码来写出POST与GET的简单交互，我这里使用的是PHP。

ajax异步提交信息

这里html部分只需要一个输入表单与任意一个标签并用onclick设置触发即可

//首先实例化XMLHttpRequest这个类 IE8请使用ActiveXObject类 这里不多说

var xhr =new XMLHttpRequest();

//数据格式 user=123&pass=123 中间使用&隔开

//接下来如果使用POST则需要写请求头文件

/*POST*/

function ajax(){

xhr.open("POST","ajax.php");//ajax.php为接收ajax发送信息的文件

var data = "user="+document.getElementById("user");//获取ajax需要提交的信息，也就是这个地方是交互信息的地方

//POST需要设置请求头文件，而GET则不需要

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//最后将data变量传递的信息发送至指定php文件

xhr.send(data);

//发送完成后就完了吗？异步ajax还需要返回后端的信息才能够完成整个交互的流程

//接下来我们监听后台返回的信息

xhr.onreadystatechange=function(){

// 判断是否完成

if(xhr.readyState==4){

//判断是否成功

if(xhr.status==200){//200 ok

//alert输出返回值，也可以使用innerHTML返回到指定元素中

alert(xhr.responseText);

}else{

//如果传输失败则弹窗消息框

alert("ajax异步提交错误")

}

}

}

}

function ajax(){

//GET则是使用常见的 get格式发送,使用?开头

xhr.open("GET","ajax.php?user="+document.getElementById("user"));

//最后将data变量传递的信息发送至指定php文件

xhr.send();

//之后的内容就同等于POST一样了

xhr.onreadystatechange=function(){

if(xhr.readyState==4){

if(xhr.status==200){//200 ok

alert(xhr.responseText);

}else{

alert("ajax异步提交错误")

}

}

}

}

整个简单的ajax异步提交信息就这样完成了，接下来发送到的ajax文件用php文件来接收

PHP接收

if(@$_POST['user']){

echo "ajaxPOST返回值=".$_POST['user'];

if(@$_GET['user']){

echo "ajaxGET返回值=".$_GET['user'];

}

是不是很简单呢？如有疑问-欢迎在下面留言评论~