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-www-form-urlencoded');
    req.send('name='+name);  
  }
}
</script>

用户名： <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两种提交方式的区别！

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