首页 > 后端开发 > php教程 > ajax 使用方法详解

ajax 使用方法详解

怪我咯
发布: 2023-03-13 20:54:01
原创
2227 人浏览过

AJAX 是一种与服务器交换数据的技术,可以在不重新载入整个页面的情况下更新网页的一部分。本篇文章主要介绍了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(&#39;username&#39;).onblur=function(){
    var name=document.getElementById(&#39;username&#39;).value;
    var req=new XMLHttpRequest();
    req.open(&#39;get&#39;,&#39;4-demo.php?name=&#39;+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(&#39;username&#39;).onblur=function(){
    var name=document.getElementById(&#39;username&#39;).value;
    name=encodeURIComponent(name);
    var req=new XMLHttpRequest();
    req.open(&#39;post&#39;,&#39;5-demo.php?age=&#39;+20);
    req.onreadystatechange=function(){
      if(req.readyState==4 && req.status==200){
        alert(req.responseText);
      }
    }
  req.setRequestHeader(&#39;Content-Type&#39;,&#39;application/x-www-form-urlencoded&#39;);
    req.send(&#39;name=&#39;+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(&#39;username&#39;).onblur=function(){
    var name=document.getElementById(&#39;username&#39;).value;
    name=encodeURIComponent(name);  //编码
    var req=new XMLHttpRequest();
    req.open(&#39;get&#39;,&#39;4-demo.php?name=&#39;+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结构获取返回的数据

以上是ajax 使用方法详解的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板