4步教你怎么AJAX

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) {<mark>6来源gaodaimacom搞#^代%!码网</mark><strong>搞gaodaima代码</strong>  }}

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-www-form-urlencoded');    req.send('name='+name);    }}</script>

用户名： <input type="text" name="" id="username">

xx.php

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

以上就是4步教你怎么AJAX的详细内容，更多请关注搞代码gaodaima其它相关文章！

喜欢 (0)赏

[搞代码]

分享 (0)