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

AJAX的使用方法详解

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

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

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

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

相关新闻more

28
04月
php访问数组最后一个元素的函数end()用

本文实例讲述了php访问数组最后一个元素的函数end()用法。分享给大家供大家参考。具体分析如下:end()函数在PHP中用于检索数组中的最... >>详情

22
11月
活通地方门户-包括人才网、房产网多频道运营策

生活通地方门户-包括万州人才网、房产网、汽车,婚嫁多频道门户运营策略 现在做什么网站好?现在大行全国门户类网站太多,分类信息如:58同城,赶... >>详情

20
07月
虚拟主机是什么?什么是虚拟主机管理系统?

虚拟主机是什么?什么是虚拟主机管理系统? 什么是虚拟主机? 虚拟主机就是存放网页的空间. 它是网络产品.是利用虚拟主机管理系统在服务器硬... >>详情

15
04月
高端网站建设-做网站建议找一个负责任的团队

做一个网站,从栏目策划到网页设计、制作、系统开发、内容编辑,最后到后期服务,包括使用的空间域名等,每一个环节都会影响一个网站的最终效果,这... >>详情

营业执照. 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号