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 相关文章推荐
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 Javascript
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
Angular.js中下拉框实现渲染html的方法
Jun 18 Javascript
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
JavaScript实现元素滚动条到达一定位置循环追加内容
Dec 28 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
微信小程序开发背景图显示功能
Aug 08 Javascript
Vue组件间通信 Vuex的用法解析
Aug 05 Javascript
详解JS预解析原理
Jun 16 Javascript
微信小程序:报错(in promise) MiniProgramError
Oct 30 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
javascript遍历对象的五种方式实例代码
Oct 24 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
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
php的命名空间与自动加载实现方法
2019/08/25 PHP
强制设为首页代码
2006/06/19 Javascript
javascript 动态添加表格行
2006/06/22 Javascript
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
Jquery截取中文字符串的实现代码
2010/12/22 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
2012/06/18 Javascript
javascript实现在网页中运行本地程序的方法
2016/02/03 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
2017/03/23 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
Vue.js在数组中插入重复数据的实现代码
2017/11/17 Javascript
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
uni app仿微信顶部导航条功能
2019/09/17 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
extjs4图表绘制之折线图实现方法分析
2020/03/06 Javascript
Python中下划线的使用方法
2015/03/27 Python
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
python 实时得到cpu和内存的使用情况方法
2018/06/11 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
详解numpy的argmax的具体使用
2019/05/27 Python
Tensorflow轻松实现XOR运算的方式
2020/02/03 Python
python3.7调试的实例方法
2020/07/21 Python
来自全球大都市的高级街头服饰:Pegador
2018/01/03 全球购物
宝信软件JAVA工程师面试经历
2012/08/19 面试题
高中自我鉴定范文
2013/11/03 职场文书
法律专业实习鉴定
2013/12/22 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
保管员岗位职责
2015/02/14 职场文书
先进工作者个人总结
2015/02/15 职场文书
会计出纳岗位职责
2015/03/31 职场文书
同学聚会通知书
2015/04/20 职场文书
python前后端自定义分页器
2022/04/13 Python