未加星标

JavaScript基础之AJAX简单的小demo

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 | 作者 红领巾 ] 0人收藏点击收藏
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是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:JavaScript基础之AJAX简单的小demo
本站链接:http://www.codesec.net/view/529672.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(26)