AJAX的使用方法详解

时间:2021-05-26

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

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

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

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章