AJAX的使用方法详解

　　AJAX作为异步传输，局部刷新非常方便，用处很广！

　　首先，对于AJAX的使用有4步：

　　1.创建AJAX对象

　　var xmlHttp = new XMLHttpRequest();

　　2.建立连接 （‘提交方式，‘Url地址）

　　xmlHttp.open(get,./AJAX_XML.xml);

　　3.判断ajax准备状态及状态码

　　 xmlHttp.onreadystatechange = function(){ if (xmlHttp.readyState==4 && xmlHttp.status==200) { } }

　　4.发送请求

　　xmlHttp.send(null); //get方式参数为null,post方式，参数为提交的参数

　　以下以异步提交用户名（输入用户名之后，异步提交后台判断，前台立马提示是否已注册，不用提交时再判断！）

　　GET方式提交

　　xx.html

　　 <script type=text/javascript> window.onload=function(){ document.getElementById(username).onblur=function(){ var name=document.getElementById(username).value; var req=new XMLHttpRequest(); req.open(get,4-demo.php?name=+name); req.onreadystatechange=function(){ if(req.readyState==4 && req.status==200){ alert(req.responseText); } } req.send(null); //如果send()方法中没有数据，要写null } } </script>

　　用户名： <input type=text name= id=username>

　　xx.php

　　 <?php print_r($_GET); ?>

　　1、 IE不支持中文

　　2、 =、&与请求的字符串的关键字相混淆。

　　POST提交

　　xx.html

　　 <script type=text/javascript> window.onload=function(){ document.getElementById(username).onblur=function(){ var name=document.getElementById(username).value; name=encodeURIComponent(name); var req=new XMLHttpRequest(); req.open(post,5-demo.php?age=+20); req.onreadystatechange=function(){ if(req.readyState==4 && req.status==200){ alert(req.responseText); } } req.setRequestHeader(Content-Type,application/x-

　　用户名： <input type=text name= id=username>

　　xx.php

　　 <?php print_r($_POST); print_r($_GET); ?>

　　1、通过send()发送数据

　　2、必须设置setRequestHeader()将传递的参数转成XML格式

　　3、post提交可以直接提交中文，不需要转码

　　4、post请求中的字符也会和URL中的&、=字符相混淆，所以建议也要使用encodeURIComponent()编码

　　5、在POST提交的同时，可以进行GET提交

　　解决 IE不支持中文 =、&与请求的字符串的关键字相混淆 问题

　　在js中通过encodeURIComponent()进行编码即可。

　　 window.onload=function(){ document.getElementById(username).onblur=function(){ var name=document.getElementById(username).value; name=encodeURIComponent(name); //编码 var req=new XMLHttpRequest(); req.open(get,4-demo.php?name=+name); req.onreadystatechange=function(){ if(req.readyState==4 && req.status==200){ alert(req.responseText); } } req.send(null); //如果send()方法中没有数据，要写null } }

　　1、req.responseText：获取返回的字符串

　　2、req.responseXML：按DOM结构获取返回的数据

　　注意post/get两种提交方式的区别！

　　以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家!