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 相关文章推荐
与Math.pow 相反的函数使用介绍
Aug 04 Javascript
DWR中各种java方法的调用
May 04 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
BootStrap表单宽度设置方法
Mar 10 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 Javascript
ES6学习教程之Map的常用方法总结
Aug 03 Javascript
深入理解Vuex 模块化(module)
Sep 26 Javascript
React Native基础入门之调试React Native应用的一小步
Jul 02 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
vue.config.js常用配置详解
Nov 14 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 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
PHP面向对象分析设计的经验原则
2008/09/20 PHP
paypal即时到账php实现代码
2010/11/28 PHP
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
php实现微信企业转账功能
2018/10/02 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
extjs form textfield的隐藏方法
2008/12/29 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
2010/03/23 Javascript
JS冒泡事件的快速解决方法
2013/12/16 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
2016/05/27 Javascript
Google 地图API Map()构造器详解
2016/08/06 Javascript
js评分组件使用详解
2017/06/06 Javascript
微信小程序tabbar不显示解决办法
2017/06/08 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
BootstrapValidator验证用户名已存在(ajax)
2019/11/08 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
Python实现基于权重的随机数2种方法
2015/04/28 Python
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
python+pyqt5编写md5生成器
2019/03/18 Python
Python3中列表list合并的四种方法
2019/04/19 Python
用Python实现二叉树、二叉树非递归遍历及绘制的例子
2019/08/09 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
python用什么编辑器进行项目开发
2020/06/17 Python
共产党员公开承诺践诺书
2014/05/28 职场文书
优秀高中学生评语
2014/12/30 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书
婚前保证书范文
2015/02/28 职场文书
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android