当前位置：首页 > 资讯 > 技术文档

AJAX的使用方法详解

时间：2020-09-27 04:37 编辑：来源：阅读：
扫一扫，手机访问

摘要：AJAX的使用方法详解

AJAX作为异步传输，局部刷新非常方便，用处很广！首先，对于AJAX的使用有4步： [b]1.创建AJAX对象[/b] [code]var xmlHttp = new XMLHttpRequest();[/code] [b]2.建立连接（‘提交方式'，‘Url地址'）[/b] [code]xmlHttp.open('get','./AJAX_XML.xml');[/code] [b]3.判断ajax准备状态及状态码[/b]

xmlHttp.onreadystatechange = function(){

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

[b]4.发送请求[/b] [code]xmlHttp.send(null); //get方式参数为null,post方式，参数为提交的参数[/code] 以下以异步提交用户名（输入用户名之后，异步提交后台判断，前台立马提示是否已注册，不用提交时再判断！） [b]GET方式提交[/b] [b]xx.html[/b]

<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>

用户名： [code]<input type="text" name="" id="username">[/code] [b]xx.php[/b]

<?php
print_r($_GET);
?>

1、 IE不支持中文 2、 =、&与请求的字符串的关键字相混淆。 [b]POST提交 [/b] [b]xx.html[/b]

<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>

用户名： [code]<input type="text" name="" id="username">[/code] [b]xx.php[/b]

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

1、通过send()发送数据 2、必须设置setRequestHeader()将传递的参数转成XML格式 3、post提交可以直接提交中文，不需要转码 4、post请求中的字符也会和URL中的&、=字符相混淆，所以建议也要使用encodeURIComponent()编码 5、在POST提交的同时，可以进行GET提交解决[b] IE不支持中文 =、&与请求的字符串的关键字相混淆[/b] 问题在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结构获取返回的数据 [b]注意post/get两种提交方式的区别！[/b] 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持编程素材网!

全部评论(0)

上一篇：8个必备的PHP功能实例代码
下一篇：实现WordPress主题侧边栏切换功能的PHP脚本详解

资讯排行榜
更多>>