香港高速VIP云机房火爆上线啦!无需备案,开通即用!配套《巅云自助建站系统3.0》将带给您飞一般的可视化拖拽建站体验,欢迎免费体验。

AJAX的使用方法详解

一佰互联网站制作(www.yinxi.net) 发布日期 2019-04-25 14:41:33 浏览数: 12

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

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

TAG标签: AJAX的使用方法详解  
一佰互联是全国知名建站品牌服务商,我们有九年网站建设、网站制作、网页设计、php开发和域名注册及虚拟主机服务经验,提供的自助建站服务更是全国有名。近年来还整合团队优势自主开发了可视化多用户”巅云建站系统“3.0平台版,拖拽排版网站制作设计,轻松实现pc站、手机微网站、小程序、APP一体化全网营销网站建设 ,已成功的为全国上百家网络公司提供自助建站平台搭建服务。

相关新闻more

22
04月
Linux中大内存页Oracle数据库优化的

前言PC Server发展到今天,在性能方面有着长足的进步。64位的CPU在数年前都已经进入到寻常的家用PC之中,更别说是更高端的PC Se... >>详情

26
04月
php图像处理函数imagecopyresa

本文实例讲述了php图像处理函数imagecopyresampled用法。分享给大家供大家参考,具体如下:语法复制代码 代码如下:bool ... >>详情

25
04月
PHP的PDO大对象(LOBs)

PHP PDO 大对象 (LOBs)应用程序在某一时刻,可能需要在数据库中存储"大"数据。"大"通常意味着"大约 4kb 或以上",尽管某些... >>详情

12
05月
专业网站建设,专业提供便宜实惠

在这样的一个生活需求中,我们不断的索取生活的价值所在。专业网站建设其独特的理念所在给我们的网络网站提供着一片净土所在。这仅仅作为我们的生活需... >>详情

营业执照. cdn加速服务 备案系统认证 网络安全协会 我们的支付方式AAA认证
上海 北京 深圳 广州 天津 杭州 南京 武汉 成都 沈阳 大连 长沙 济南 青岛 苏州 福州 无锡 哈尔滨 宁波 重庆 大庆 厦门 西安 长春 珠海 郑州 海口 昆明 太原 石家庄 温州 合肥 乌鲁木齐 南宁 南通 合肥 兰州 呼和浩特 贵阳 烟台 秦皇岛 包头 唐山 银川 汕头 连云港 威海 西宁 湛江 北海 万州 涪陵 长寿 黔江 永川 丰都 忠县 江津 南川 开县 云阳 万盛 梁平 垫江 巫山 城口 建站宝盒 免费建站 门户网站建设 微信网站 手机网站 门户网站制作

7x24小时服务电话:18581389571 传真:023-85725751 免费建站交流群:236412099 139947842(自助建站交流) E-Mail:post@yinxi.net 网站投诉:
重庆楚捷科技有限公司 一佰互联©版权所有 自助建站(www.yinxi.net,Inc.) 2001-2020 All Rights Reserved 本站程序受法律保护,网站法律顾问:ITLAW-庄毅雄律师
中华人民共和国信息产业部网站备案号:渝ICP备12000592号