当前位置:首页 » 网页前端 » web学习ajax
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

web学习ajax

发布时间: 2022-04-12 20:11:48

‘壹’ 如何使用Ajax技术开发Web应用程序

一、简介

AJAX,一个异步JavaScript和XML的缩略词,是最近出来的技术词语。异步意味着你可以经由超文本传输协议(HTTP)向一个服务器发出请求并且在等待该响应时继续处理另外的数据。这就意味着,例如,你可以调用一个服务器端脚本来从一个数据库中以XML方式检索数据,把数据发送到存储在一个数据库的服务器脚本,或者简单地装载一个XML文件以填充你的Web站点而不需刷新该页面。然而,在这项新技术提供巨大能力的同时,它也引起了在"Back"按钮问题上的很多争论。本文将帮助你确定在真实世界中何时使用AJAX是最佳选择。

首先,我假定你对缩略词JavaScript和XML部分有一个基本了解。尽管你能通过AJAX请求任何类型的文本文件,但是我在此主要集中讨论XML。我将解释怎样在真实世界中使用AJAX以及怎样在一个工程中评估它的价值。在你读完本文后,你将会明白什么是AJAX,在什么情况下,为什么以及怎样使用这项技术。你将要学习,在保持给用户提供直观体验的同时怎样创建对象,发出请求以及定制响应。

我已创建了一个适合于本文的示例工程(你可以下载源代码)。这个示例实现了一个简单的请求-它装载一个包含页面内容的XML文件并且分析数据以把它显示在一个HTML页面中。
二、常规属性和方法

表1和2提供了一个属性和方法的概述- 它们为Windows Internet Explorer 5,Mozilla,Netscape 7,Safari 1.2,和Opera等浏览器所支持。

表1属性

属性 描述

onreadystatechange 当请求对象变化时该事件处理器激活。

readyState 返回指示对象的当前状态的值。

responseText 来自服务器的响应串的版本 。

responseXML 来自服务器的响应的DOM兼容的文档对象。

status 来自服务器的响应的 状态码。

statusText 以一个字符串形式返回的状态消息。

表2方法

方法 描述

Abort() 取消当前HTTP请求。

getAllResponseHeaders() 检索所有的HTTP头值。

getResponseHeader("headerLabel") 从响应体中检索一个HTTP头部的值。

open("method","URL"[,asyncFlag[,"userName" [,"password"]) 初始化一个MSXML2.XMLHTTP请求,并从该请求指定方法,URL和认证信息 。

send(content) 发送一个HTTP请求到服务器并接收响应。

setRequestHeader ("label", "value") 指定一个HTTP头的名字。
三、从哪里开始

首先,你需要创建XML文件-后面我们对之进行请求并作为页面内容进行分析。你正在请求的文件必须与 目标工程驻留在相同的服务器上。

下一步,创建发出请求的HTML文件。当页面通过使用页面主体 中的onload方法进行加载时,该请求发生。接着,该文件需要一个有ID的div标签,这样当我们准备好要 显示内容时就可以对之进行定位。当你做完所有这些,你的页面的主体上去,如下:
<body onload="makeRequest('xml/content.xml'); ">

<div id=""></div>

</body>
四、创建请求对象

为了创建请求对 象,你必须检查是否浏览器使用XMLHttpRequest或ActiveXObject。这两个对象之间的主要区别在于使用 它们的浏览器。Windows IE 5 及以上版本使用ActiveX对象; 而Mozilla,Netscape 7,Opera和Safari 1.2及以上版本使用XMLHttpRequest对象。另外一个区别是你创建对象的方式:Opera,Mozilla, Netscape和Safari允许你简单地调用该对象的构造器,但是Windows IE需要把对象的名字传递到ActiveX 构造器中。下面是怎样创建代码来决定要使用哪个对象和怎样创建它的示例:

if (window.XMLHttpRequest)
{ request = new XMLHttpRequest(); }
else if (window.ActiveXObject)
{ request = new ActiveXObject("MSXML2.XMLHTTP"); }
五、发出请求

现在既然你已经创建了你的请求对象,那么你已经为向服务器发 出请求作了准备。创建一个到事件处理器的参考以听取onreadystatechange事件。然后,该事件处理器 方法将在状态发生变化时作出响应。一旦我们完成请求,我们就开始创建这个方法。打开连接以GET或 POST一个定制的URL-在此是一个content. xml,并且设置一个布尔定义-是否你想要进行异步调用。

现在到了发出请求的时间了。在这个示例中,我使用了null,因为我们使用的是GET; 为了使用 POST,你需要使用下面这个方法发出一个查询串:
request.onreadystatechange = onResponse;

request.open("GET". url, true);

request.send (null);
六、定制加载和错误处理消息

你为onreadystatechange方法创建的事件处理器 正是集中进行加载和处理错误的场所。现在到了考虑用户并针对他们与之交互的内容的状态提供反馈的 时候了。在这个实例中,我针对所有的装载状态代码提供反馈,并且也对最经常发生的错误处理状态代 码提供一些基本的反馈。为了显示请求对象的当前状态,readyState属性包括显示在下表中的一些值。

值 描述

0 未初始化,对象没有用数据进行初始化。

1 装载中,对象正在装载它 的数据。

2 装载结束,对象完成了它的数据的装载。

3 可交互,用户能与对象交互了, 尽管它还没有装载结束。

4 完成,对象已经完全被初始化。

W3C中有很长的一串有关HTTP 状态代码的定义。我选择了两个状态代码:

200:请求成功了。

404:服务器没有找到与所 请求的文件相匹配的任何东西。

最后,我检查任何另外的状况代码-它们将生成一个错误并提供 一个一般错误信息。下面是一个代码示例-你可以用之来处理这些情况。注意,我在定位我们前面在HTML 文件的主体中创建的div ID并且对它应用装载和/或错误信息-通过innerHTML方法-这个方法用于设置在 div对象的开始和结束标签之间的HTML:

if(obj.readyState == 0)
{ document.getElementById('').innerHTML = "Sending Request..."; }
if(obj.readyState == 1)
{ document.getElementById('').innerHTML = "Loading Response..."; }
if(obj.readyState == 2)
{ document.getElementById('').innerHTML = "Response Loaded..."; }
if(obj.readyState == 3)
{ document.getElementById('').innerHTML = "Response Ready..."; }
if(obj.readyState == 4){
if(obj.status == 200){ return true; }
else if(obj.status == 404)
{
// 添加一个定制消息或把用户重定 向到另外一个页面
document.getElementById('').innerHTML = "File not found";
}
else
{document.getElementById('').innerHTML = "There was a problem retrieving the XML."; }
当状况代码为200 时,这意味着请求成功。下面开始进行响应了。

七、分析响应

当你准备好分析来自请求 对象的响应时,真正的工作开始了。现在你可以用你请求的数据开始工作。仅为测试目的,在开发期间 ,可以使用responseText和responseXML属性来显示来自响应的原始数据。为了存取XML响应中的结点, 首先使用你创建的请求对象,定位到responseXML属性以检索(你可能已经猜测出来)来自响应的XML。定 位到documentElement-它检索一个到XML响应的根结点的参考。
var response = request.responseXML.documentElement;
现在既然你有了到响应的根结点的参考,那么你可以使 用getElementsByTagName()以结点名字来检索childNodes。下面一行用一个头部的nodeName来定位一个 childNode:

response.getElementsByTagName('header') [0].firstChild.data;

使用firstChild.data可以允许你存取该元素中的文本:

response.getElementsByTagName('header')[0].firstChild.data;

下面是怎样 创建这些代码的完整的例子:

var response = request.responseXML.documentElement;
var header = response.getElementsByTagName ('header')[0].firstChild.data;
document.getElementById ('').innerHTML = header;

八、需求分析

现在既然你知道怎样使用 AJAX的基础知识,那么下一步就是决定是否在一工程使用它。须记住的最重要的事情是,在你还没有刷 新页面时你无法使用"Back"按钮。为此,可以先专注于你的工程中的一小部分-它能够从使用 这种类型的交互中受益。例如,你可以创建一个表单-它在用户每次输入一个输入字段或一个字母时查询 一个脚本以便进行实时校验。你可以创建一个拖放页面-在释放一项时,它能够把数据发送到一个脚本中 并把该页面的状态保存到一个数据库中。使用AJAX的理由毫无疑问是存在的; 并且这种使用无论对开发 者还是用户都会带来益处; 这全依赖于具体的条件和执行情况。

还有其它方法可用来解决 "Back"按钮的问题,例如使用Google Gmail-它现在能够为你的操作提供一种撤消功能而不刷 新该页面。以后还会出现许多更具创造性的例子-它们将通过提供给开发者创建独特实时的体验的手段给 用户带来更大的好处。

九、结论

尽管AJAX允许我们构建新的和改进的方式来与一个WEB页 面进行/交互; 但是作为开发者,我们需要牢记产品是不考虑技术的; 它关心的是用户以及其如何与用户 进行交互。没有了用户群,我们构建的工程毫无用处。基于这个标准,我们就能评估应该使用什么技术 以及何时使用它们来创建对相应用户有用的应用。

‘贰’ web前端要懂ajax吗

肯定的懂得!ajax是前端的一部分!是处理数据的!不懂就仅限于前端而已,不能跟后台交互,不会AJAX有一定的局限性!

‘叁’ web前端,AJaX跟jq好学吗

JQuery只是一个便于提升编程效率的JavaScript库,它有一些API,把常用的记住就行了,没有什么难度,不会的看一下API文档就行了。不用特意去学,用几次就会了。
如果用jQuery,则AJAX也可以使用JQuery提供的API,也可以研究研究原生的。
这两个基本没有什么学习成本

‘肆’ web开发需要学习什么

首先对于Web前端初学者而言,HTML和CSS是需要掌握的内容。

HTML称为超文本标记语言,是一种标识性的语言。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。
CSS层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
综合来看,通过学习HTML和CSS主要是为了实现各终端页面布局,但是现在为了提升用户界面的体验,越来越多的产品更加注重交互效果的展示,那么提到交互效果就离不开JavaScript。JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
为了在实际开发中代码编写的更加简洁、规范,那么就需要Web开发人员能够熟练的使用前端框架。前端框架一般指用于简化网页设计的框架,这些框架封装了一些功能,比如HTML文档操作,各种按钮、表单控件等,常用的前端框架有Bootstrap框架、React框架、Vue框架、Angular框架等。
希望我的回答能帮到你,望采纳!!

‘伍’ 如何学习ajax 安装什么软件 有哪些内容 基础学些什么 做java web 里面引用js jquery 就是使用了aja

软件:vim
基础学:HTML, JavaScript, HTTP协议与服务端技术
--
Ajax: Asynchronized Javascript and XML
也就是ajax起码包括了js和xml,当然这只是用到的东西,但不意味着你用了js和xml用到了ajax。
(就像打飞机要用手,但是你有手不代表你就会打飞机)

‘陆’ web前端开发需要学习哪些知识

首先我们要分清前端这部分的分工,一般来讲分为:设计和开发。设计是设计师的工作,设计师按照用户需求出设计图,他们使用的工具一般是fireworks、Dreamweaver和photoshop这类设计工具,图片出来后,前端开发就需要按照图片的设计制作HTML静态页面,那么这就是前端开发的主要工作了。
Web前端工程师是协调前端工程师、后端程序员实现网站页面活程序的界面美化、交互体验的IT技术开发人员,需要精通HTML、CSS、JavaScript、jQuery、Ajax等核心的Web前端技术,具备互联网交互设计能力,熟悉Vue、React、angularjs 等最新的框架。
web前端学习主要包括:HTML、CSS、JavaScript、jQuery、Ajax
HTML:不是编程语言,仅仅是数据格式
CSS:无类型的样式修饰语言,算弱类型语言;需理解每个元素属性、样式等
JavaScript:学习起来相对来说不算太难,入手快
jQuery、Ajax:如果想在前端这块混的好,一定要掌握(虽然不一定要用,但一定要会)
希望我的回答能帮助到您,加油哟!

‘柒’ java web中的ajax怎么使用

$.ajax({
url:url,//url
type:"post",//请求方式
dataType:'json',//数据格式
data:{//参数
"a":'a',
"b":'b'
},
success:function(data){//成功后执行方法;处理返回值
alert(data);
},
error:function(){//成功后执行方法
alert("加载错误!");
}
});

以上是简单的例子

具体参见:http://www.w3school.com.cn/jquery/ajax_ajax.asp

‘捌’ 做web前端开发,已经学习了html,css,js,后边还要学点什么,直接再学ajax、jquery吗

这个问题明显就知道你其实没有很高的学完js,ajax这种技术在js和jq都是有相对应的方法,在你学习js的时候,应该有对应的拓展学习,另外jq其实是封装之后的js,学习玩js之后,jq的学习和上手都很快!
不过,做web开发,这些技术都需要了解学习的!之后还有其他的技术需要学习,比如canvas绘图技术

‘玖’ 关于web服务器内部如何实现ajax调用的问题

Ajax 简介

Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本文的作者是一位 Ajax 专家,他演示了这些技术如何协同工作 —— 从总体概述到细节的讨论 —— 使高效的 Web 开发成为现实。他还揭开了 Ajax 核心概念的神秘面纱,包括 XMLHttpRequest 对象。

五年前,如果不知道 XML,您就是一只无人重视的丑小鸭。十八个月前,Ruby 成了关注的中心,不知道 Ruby 的程序员只能坐冷板凳了。今天,如果想跟上最新的技术时尚,那您的目标就是 Ajax。

但是,Ajax 不仅仅 是一种时尚,它是一种构建网站的强大方法,而且不像学习一种全新的语言那样困难。

一、业务需求

在开发中,当一个列表页面加载完成后,我需要根据列表每一项的id去服务器端获取对应的数据然后再把获取的数据赋给当前id对应的标签。

例如如下表格: