JavaScript基础之AJAX简单的小demo


Posted in Javascript onJanuary 29, 2017

AJAX

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。

function prepareForms() {
 for(var j=0 ; j<document.forms.length ; j++){
  var this_forms = document.forms[j];
  resetFields(this_forms);
   this_forms.onsubmit = function () {
    if(!validateForm(this)) return false; //进行浏览器端表单验证
    var article = document.getElementsByTagName("article")[0];
    if(submitFormWithAjax(this,article)) return false; //代表防止重复提交 实际的提交已经完成
   return true;
   }
 }
}

首先 通过表单的提交事件调用相应的验证方法 和ajax提交方法 如果说ajax提交成功 返回false 拦截提交事件 如果ajax失败 则正常提交

function displayAjaxLoading(element) {
 while(element.hasChildNodes()){
  element.removeChild(element.lastChild); //如果还有子节点 重复删除 直到内部为空
 }
 var content = document.createElement("img");
 content.setAttribute("src","images/loading.gif");
 content.setAttribute("alt","loading....");
 element.appendChild(content);
} //拿到元素 清空内部 并添加一个img
function submitFormWithAjax(whichform,thetarget) {
 var request = getHTTPObject();
 if(!request){return false ;}
 displayAjaxLoading(thetarget);//调用加载方法
 var dataParts = [];
 var element; //提前创建要用的容器
 for(var i=0 ; i<whichform.elements.length ; i++){
  element = whichform.elements[i];
  dataParts[i] = element.name + "=" +encodeURIComponent(element.value) //把元素的名字和值转化成URL编码放入容器中
 }
 var data = dataParts.join("&"); //把数组转化成一串字符串 每个项目之间用&连接
 request.open("post",whichform.getAttribute("action"),true); //向表单目标地址准备提出名为post的请求
 request.setRequestHeader("content-type","application/x-www-form-urlencoded");//设置头部信息
 //获取请求后就会调用一下的 方法 算是一个触发器 服务器会执行以下内容
 request.onreadystatechange = function () {
  if(request.readyState == 4){
   if(request.status == 200 || request.status == 0){
    var matches = request.responseText.match(/<article>([\s\S]+)<\/article>/) //捕获文本
    if(matches.length>0){
     thetarget.innerHTML = matches[1]; //正则表达式返回0为包含<article> 1为不包含的版本
    }
    else {
     thetarget.innerHTML = "<p>sorry not find</p>";
    }
   }
   else {
    thetarget.innerHTML = "<p>" + request.statusText + "</p>";
   }
  }
 }
 request.send(data); //对目标服务器发送请求
 return true;//代表函数执行完毕
}

让我们分步来查看具体做了什么事情

第一 获取了一个请求对象

第二 调用display方法 让页面删除article下的所有元素并放上load动画

第三 创建URL编码的请求 用数组存放 一项里面为name和被URL转义的value 然后把他每项通过&连接 组成一个完整的字符串

第四 设置了请求的基本属性 比如命名 目标地址 头文件

第五 创建一个监听程序 监听请求 如果成功则把响应的html填入到目标article中
第六 正式发送请求 成功返回ture

以上所述是小编给大家介绍的JavaScript基础 AJAX简单的小demo ,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
比较全面的event对像在IE与FF中的区别 推荐
Sep 21 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
Aug 07 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
javascript闭包的理解
Apr 01 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
简单实现jQuery级联菜单
Jan 09 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
纯JS实现简单的日历
Jun 26 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 Javascript
微信小程序视频弹幕发送功能的实现
Dec 28 Javascript
JavaScript Date 知识浅析
Jan 29 #Javascript
JavaScript实现时钟滴答声效果
Jan 29 #Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
Jan 29 #Javascript
jQuery图片轮播功能实例代码
Jan 29 #Javascript
jQuery代码实现实时获取时间
Jan 29 #Javascript
用director.js实现前端路由使用实例
Jan 27 #Javascript
详解bootstrap的modal-remote两种加载方式【强化】
Jan 27 #Javascript
You might like
咖啡与水的关系
2021/03/03 冲泡冲煮
据说是雅虎的一份PHP面试题附答案
2009/01/07 PHP
php 中英文语言转换类代码
2011/08/11 PHP
单一index.php实现PHP任意层级文件夹遍历(Zjmainstay原创)
2012/07/31 PHP
php解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
PHP怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
php实现在多维数组中查找特定value的方法
2015/07/29 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
防止登录页面出现在frame中js代码
2014/07/22 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
2017/09/10 jQuery
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
浅谈Webpack自动化构建实践指南
2017/12/18 Javascript
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
微信小程序 JS动态修改样式的实现方法
2018/12/16 Javascript
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
2019/09/03 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
浅谈python多线程和队列管理shell程序
2015/08/04 Python
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
深深扎根运动世界的生活品牌:Tillys
2017/10/30 全球购物
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
求网格中的黑点分布
2013/11/06 面试题
文言文形式的学生求职信
2013/12/03 职场文书
就业意向书
2014/07/29 职场文书
手把手教你使用TensorFlow2实现RNN
2021/07/15 Python
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python