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 网页过期时间的控制代码
Jun 29 PHP
用PHP查询搜索引擎排名位置的代码
Jan 05 PHP
如何在smarty中增加类似foreach的功能自动加载数据
Jun 26 PHP
php无限遍历目录示例
Feb 21 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
Jun 25 PHP
php使用标签替换的方式生成静态页面
May 21 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
Dec 21 PHP
php metaphone()函数及php localeconv() 函数实例解析
May 15 PHP
php版微信公众平台接口开发之智能回复开发教程
Sep 22 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
Jul 22 PHP
PHP+MySQL实现模糊查询员工信息功能示例
Jun 01 PHP
tp5框架基于Ajax实现列表无刷新排序功能示例
Feb 10 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教程孙仲岳主讲
2008/01/07 PHP
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
jquery.ui.draggable中文文档(原文翻译)
2013/11/15 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
学习JavaScript设计模式(链式调用)
2015/11/26 Javascript
JS实现的跨浏览器解析XML文件实例
2016/06/21 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
jQuery EasyUI Draggable拖动组件
2017/03/01 Javascript
AngularJS自定义指令之复制指令实现方法
2017/05/18 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
原生JS实现pc端轮播图效果
2020/12/21 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
对sklearn的使用之数据集的拆分与训练详解(python3.6)
2018/12/14 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
Python基于进程池实现多进程过程解析
2020/04/30 Python
python字典通过值反查键的实现(简洁写法)
2020/09/30 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
介绍一下Linux内核的排队自旋锁
2014/08/27 面试题
出纳岗位职责范本
2013/12/01 职场文书
团队精神口号
2014/06/06 职场文书
高中生旷课检讨书
2014/10/08 职场文书
工作批评与自我批评范文
2014/10/16 职场文书
2015年护士工作总结范文
2015/03/31 职场文书
python析构函数用法及注意事项
2021/06/22 Python
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android