C语言学习网

如何使用AJAX

发表于:2022-08-12 作者:安全数据网编辑
编辑最后更新 2022年08月12日,这篇文章主要为大家展示了"如何使用AJAX",内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下"如何使用AJAX"这篇文章吧。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

用户名:

xx.php

 

1、 IE不支持中文

2、 =、&与请求的字符串的关键字相混淆。

POST提交

xx.html

用户名:

xx.php

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

以上是"如何使用AJAX"这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!

0