AJAX的使用方法详解


Posted in PHP onApril 29, 2017

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 相关文章推荐
php GD绘制24小时柱状图
Jun 28 PHP
elgg 获取文件图标地址的方法
Mar 20 PHP
php获取post中的json数据的实现方法
Jun 08 PHP
php实现的九九乘法口诀表简洁版
Jul 28 PHP
laravel 5 实现模板主题功能
Mar 02 PHP
如何用PHP来实现一个动态Web服务器
Jul 29 PHP
PHP入门教程之操作符与控制结构流程详解
Sep 09 PHP
php unicode编码和字符串互转的方法
Aug 12 PHP
php文件上传及下载附带显示文件及目录功能
Apr 27 PHP
Yii2框架中日志的使用方法分析
May 22 PHP
php使用crypt()函数进行加密
Jun 08 PHP
php封装单文件上传到数据库(路径)
Oct 15 PHP
PHP实现的DES加密解密封装类完整实例
Apr 29 #PHP
PHP编程实现csv文件导入mysql数据库的方法
Apr 29 #PHP
PHP实现ASCII码与字符串相互转换的方法
Apr 29 #PHP
PHP中Notice错误常见解决方法
Apr 28 #PHP
PHP实现查询手机归属地的方法详解
Apr 28 #PHP
PHP中Cookie的使用详解(简单易懂)
Apr 28 #PHP
PHP解决中文乱码
Apr 28 #PHP
You might like
PHP 飞信好友免费短信API接口开源版
2010/07/22 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
PHP curl实现抓取302跳转后页面的示例
2014/07/04 PHP
php验证session无效的解决方法
2014/11/04 PHP
PHP常见的序列化与反序列化操作实例分析
2019/10/28 PHP
JavaScript 事件记录使用说明
2009/10/20 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
2015/02/05 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
2016/01/23 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
layui表单提交到后台自动封装到实体类的方法
2019/09/12 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
[52:31]VP vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python和C语言混合编程实例
2014/06/04 Python
Python 自动补全(vim)
2014/11/30 Python
python开发利器之ulipad的使用实践
2017/03/16 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2021/03/03 Python
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
禁毒宣传标语
2014/06/19 职场文书
机关党建工作汇报材料
2014/08/20 职场文书
如何写股份合作协议书
2014/09/11 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
烟台的海导游词
2015/02/02 职场文书
Redis的字符串是如何实现的
2021/10/24 Redis