AJAX的使用方法详解

yipeiwu_com6年前PHP代码库

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两种提交方式的区别!

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持【宜配屋www.yipeiwu.com】!

相关文章

php设计模式 Mediator (中介者模式)

复制代码 代码如下: <?php /** * 中介者模式 * * 用一个中介对象来封装一系列的对象交互,使各对象不需要显式地相互引用从而使其耦合松散,而且可以独立地改变它们之间的交...

phpinfo无法显示的原因及解决办法

phpinfo无法显示的原因及解决办法

今天调试lnmp环境,出现如下报错。无法查询到php信息。 环境:linux版本CentOS Linux release 7.3.1611 (Core),nginx使用tengine。...

php 无限级缓存的类的扩展

复制代码 代码如下:<?php /** * 功能: 根据条件建立分类缓存减少类别使用 * 创建日期:Thu May 31 15:55:11 CST 2007 * 最后更新: * 作...

php 分库分表hash算法

复制代码 代码如下://分库分表算法 function calc_hash_db($u, $s = 4) { $h = sprintf("%u", crc32($u)); $h1 = i...

PHP基于关联数组20行代码搞定约瑟夫问题示例

PHP基于关联数组20行代码搞定约瑟夫问题示例

本文实例讲述了PHP基于关联数组20行代码搞定约瑟夫问题。分享给大家供大家参考,具体如下: 记得前段时间一写做java开发的兄弟对我说他java60行做了个约瑟夫问题,挺不错的。调侃ph...