AJAX的使用方法详解

 更新时间:2017年04月29日 11:02:44   作者:下页、再停留  
本篇文章主要介绍了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设计模式之策略模式应用案例详解

    php设计模式之策略模式应用案例详解

    这篇文章主要介绍了php设计模式之策略模式,结合具体应用案例形式详细分析了php策略模式的原理、定义、实现方法及项目应用案例与操作注意事项,需要的朋友可以参考下
    2019-06-06
  • PHP实现普通hash分布式算法简单示例

    PHP实现普通hash分布式算法简单示例

    这篇文章主要介绍了PHP实现普通hash分布式算法,结合实例形式分析了普通hash分布式算法类的定义与简单使用技巧,需要的朋友可以参考下
    2018-08-08
  • PHP中使用协同程序实现合作多任务

    PHP中使用协同程序实现合作多任务

    这篇文章指导你通过使用协同程序来实施任务调度,通过实例实现对技术的理解。我将在前三节做一个简单的背景介绍。如果你已经有了比较好的基础,可以直接跳到“协同多任务处理”一节
    2013-07-07
  • php 远程图片保存到本地的函数类

    php 远程图片保存到本地的函数类

    获取远程图片并把它保存到本地
    2008-12-12
  • php mb_substr()函数截取中文字符串应用示例

    php mb_substr()函数截取中文字符串应用示例

    substr()函数用来截取字符串,但是对于中文字符会出现问题,而mb_substr()和mb_strcut这两个函数可以,下面为大家介绍其具体用法
    2014-07-07
  • php过滤所有恶意字符(批量过滤post,get敏感数据)

    php过滤所有恶意字符(批量过滤post,get敏感数据)

    最近dedecms报漏洞不断,这里分享下php的过滤函数,大牛飘过吧,给小黑阔们学习交流用
    2014-03-03
  • PHP通过引用传递参数用法分析

    PHP通过引用传递参数用法分析

    这篇文章主要介绍了PHP通过引用传递参数用法,结合具体实例分析了php函数参数中使用引用进行参数传递的功能与操作技巧,需要的朋友可以参考下
    2016-12-12
  • PHP中ADODB类详解

    PHP中ADODB类详解

    1. 前言 ADODB 是 Active Data Objects Data Base 的简称,它是一种 PHP 存取数据库的函式组件。现在 SFS3 系统 (校园自由软件交流网学务系统) 计划的主持人陈莹光老师,决定采用此一组件,为了让更多有心参与该项目的伙伴们能够顺利加入发展的行列,小弟认为有必要把 ADODB 的中文入门介绍写出来,以方便伙伴们参考备查。
    2008-03-03
  • 解析php curl_setopt 函数的相关应用及介绍

    解析php curl_setopt 函数的相关应用及介绍

    本篇文章是对php中的curl_setopt函数进行了详细的分析介绍,需要的朋友参考下
    2013-06-06
  • PHP pthreads v3下的Volatile简介与使用方法示例

    PHP pthreads v3下的Volatile简介与使用方法示例

    这篇文章主要介绍了PHP pthreads v3下的Volatile简介与使用方法,结合实例形式较为详细的分析了PHP pthreads v3下Volatile的功能、原理、使用方法及相关操作注意事项,需要的朋友可以参考下
    2020-02-02

最新评论