AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。
AJAX 是一种用于创建快速动态网页的技术。
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。[1]
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 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('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两种提交方式的区别!
Atas ialah kandungan terperinci 4步教你怎么AJAX. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!