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 innerText和innerHtml应用
Jan 28 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
Apr 01 Javascript
kmock javascript 单元测试代码
Feb 06 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
热点新闻滚动特效的js代码
Aug 17 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
JS返回只包含数字类型的数组实例分析
Dec 16 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
May 25 Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 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
IStream与TStream之间的相互转换
2008/08/01 PHP
在Ubuntu 14.04上部署 PHP 环境及 WordPress
2014/09/02 PHP
php实现的通用图片处理类
2015/03/24 PHP
详解WordPress中给链接添加查询字符串的方法
2015/12/18 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
举例说明如何为JavaScript的方法参数设置默认值
2015/11/17 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
javaScript知识点总结(必看篇)
2016/06/10 Javascript
BootStrap实现鼠标悬停下拉列表功能
2017/02/17 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
python使用socket向客户端发送数据的方法
2015/04/29 Python
谈谈如何手动释放Python的内存
2016/12/17 Python
Python网络爬虫中的同步与异步示例详解
2018/02/03 Python
人生苦短我用python python如何快速入门?
2018/03/12 Python
python的schedule定时任务模块二次封装方法
2019/02/19 Python
python 寻找离散序列极值点的方法
2019/07/10 Python
详解python中*号的用法
2019/10/21 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
python zip()函数的使用示例
2020/09/23 Python
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
社区健康教育工作方案
2014/06/03 职场文书
房屋产权证明书
2014/10/15 职场文书
大专护理专业自荐信
2015/03/25 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
2019求职信大礼包
2019/05/15 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL