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 相关文章推荐
javascript日期对象格式化为字符串的实现方法
Jan 14 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
Aug 04 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
Dec 19 Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 Javascript
JS实现数组去重方法总结(六种方法)
Jul 14 Javascript
JavaScript中关于class的调用方法
Nov 28 Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
20个必会的JavaScript面试题(小结)
Jul 02 Javascript
浅谈JS的二进制家族
May 09 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中ob(Output Buffer 输出缓冲)函数使用方法
2007/07/21 PHP
使用PHP socke 向指定页面提交数据
2008/07/23 PHP
AJAX的跨域访问-两种有效的解决方法介绍
2013/06/22 PHP
PHP读取PPT文件的方法
2015/12/10 PHP
PHP简单处理表单输入的特殊字符的方法
2016/02/03 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
一个加密JavaScript的开源工具PACKER2.0.2
2006/11/04 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
layui文件上传控件带更改后数据传值的方法
2019/09/23 Javascript
京东优选小程序的实现代码示例
2020/02/25 Javascript
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
Pthon批量处理将pdb文件生成dssp文件
2015/06/21 Python
python计算列表内各元素的个数实例
2018/06/29 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
易程科技软件测试笔试
2013/03/24 面试题
什么是lambda函数
2013/09/17 面试题
中学生学习生活的自我评价
2013/10/26 职场文书
团支书的期末学习总结自我评价
2013/11/01 职场文书
2014党员民主评议个人总结
2014/09/10 职场文书
介绍长城的导游词
2015/01/30 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
利用Python+OpenCV三步去除水印
2021/05/28 Python
Python List remove()实例用法详解
2021/08/02 Python
MySQL主从切换的超详细步骤
2022/06/28 MySQL