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两种提交方式的区别！
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家!
相关文章
这篇文章主要介绍了php在线解压ZIP文件的方法,包含了较为完整的上传与zip解压功能,非常具有实用价值,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了php数组排序usort、uksort与sort函数用法,详细介绍了usort、uksort与sort函数在数组排序中的应用,具有不错的参考借鉴价值,需要的朋友可以参考下2014-11-11
php环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
php环境配置 php5 mysql5 apache2 phpmyadmin安装与配置...2006-11-11
这篇文章主要介绍了php实现跨域提交form表单的方法,结合实例形式分析了curl及ajax两种方法进行跨域提交的操作技巧,需要的朋友可以参考下2016-10-10
这篇文章主要介绍了js+php实现静态页面实时调用用户登陆状态的方法,采用在静态页面中使用js调用php页面从而实现用户登录状态的实时调用功能,需要的朋友可以参考下2015-01-01
这篇文章主要为大家详细介绍了一个非常实用的php文件上传类，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了PHP简单获取随机数的常用方法,结合实例形式分析了php实现指定范围随机数与指定字符序列随机数的简单实现技巧,需要的朋友可以参考下2017-06-06
这篇文章主要介绍了php+pdo实现的购物车类,结合完整实例形式分析了PHP结合pdo操作数据库读写实现购物车功能相关实现与使用方法,需要的朋友可以参考下2020-01-01
这篇文章主要介绍了PHP实现的mongoDB数据库操作类,结合完整实例形式详细分析了php基于单例模式针对mongoDB数据库连接、增删改查、统计等操作相关实现技巧,需要的朋友可以参考下2018-04-04
这篇文章主要介绍了PHP简单装饰器模式实现与用法,结合具体实例形式分析了php装饰器模式的原理、实现与使用方法,需要的朋友可以参考下2017-06-06
最新评论