ExtJS（二）--AJAX基础

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了ExtJS（二）--AJAX基础，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

最近在学习ExtJS，在学习到AJAX的一些基础知识时便总结出来和大家分享一下，适合于初学者看看，大神可以绕过！

一、AJAX概念

AJAX是AsynchronousJavascript And Xml的简写，它不是一门新的技术，而是几门技术的综合应用，是WEB2.0时代出现的一种异步通信技术。其中最核心的是在Javascript中调用一个叫XMLHttpRequest类，使用XMLHttpRequest这个类可以不用刷新整个网页就可以跟服务器端进行通信，同时再由这个类负责处理服务器端响应回来的信息，然后再通过Javascript中DOM编程将处理好的信息结果添加到网页上，从而实现了一个网页的局部刷新。提升了用户的体验，同时也减轻了WEB服务器的压力。

二、AJAX的特点

  1. 页面可以保持不变都能完成用户所有的请求。也就是说在客户端浏览器请求服务器端的一个页面回来后，这个页面可以一直保持不变，用户所有的请求操作都由javascript代码发送到服务器端，当服务器响应回来的时候，也是由javascript代码进行处理返回来的信息，然后动态的添加到这个页面上，而不用刷新整个页面，页面还是原来的那个页面。
  2. 增强用户的体验。当用用户在浏览网页的时候，同时与服务器进行异步交互和实现网页内容的局部更新。例如：用户登陆和注册的时候，输入框的焦点失去的时候，就可使用AJAX请求异步与后台交互进行用户名的校验。还有就是密码安全等级的判断等等都应用到AJAX技术。

三、AJAX的工作原理

  1. AJAX技术采用异步交互方式，从而消除了传统WEB应用的同步交互方式那种“请求---响应---请求---响应.....”的过程，而可以采用“请求---请求----请求---响应---请求---响应---响应.......”这种方式，这样可以提升用户体验，减轻WEB服务器的压力。
  2. 用户的浏览器本身就内嵌了一个XMLHttpRequest类，使用该类的对象可以在浏览器执行任务的时候就装载AJAX引擎，这个AJAX引擎就可以跟服务器进行异步通信，它可以独立于用户与网络服务器间的交流。所以就可以使用javascript来调用AJAX引擎来代替用户产生一个HTTP动作，这样内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求就可以交给AJAX来执行了。

如下图：

四、AJAX所包含的技术

AJAX:(AsynchronousJavaScript and XML)并不是一项新技术,是多种技术的综合，包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.

  1. 服务器端语言：服务器需要具备向浏览器发送特定信息的能力。Ajax与服务器端语言无关。
  2. XML (eXtensible Markup Language，可扩展标记语言)是一种描述数据的格式。AJAX程序需要某种格式化的格式来在服务器和客户端之间传递信息，XML是其中的一种选择。
  3. XHTML（eXtended Hypertext Markup Language,使用扩展超媒体标记语言）和CSS（Cascading Style Sheet,层叠样式表）标准化呈现。
  4. DOM（Document Object Model,文档对象模型）实现动态显示和交互。
  5. 使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取。
  6. 使用JavaScript绑定和处理所有数据。

五、AJAX的缺陷

AJAX技术也不是很完美的，也存在下面的缺陷：

  1. AJAX大量使用javascript和ajax引擎，而这个取决于浏览器本身对AJAX技术的支持。

    IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla虽然也支持AJAX，但是提供XMLHttpRequest的方式不一样。所以，使用AJAX的程序必须测试针对各个浏览器的兼容性。

  2. AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。

六、XMLHttpRequest对象
 XMLHttpRequest是XMLHTTP组件的对象，通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。

@H_917_301@ XMLHttpRequest最早是在IE5中以ActiveX组件的形式实现的。非W3C标准.
@H_917_301@ 创建XMLHttpRequest对象（由于非标准所以@R_502_369@不统一）
  1. InternetExplorer把XMLHttpRequest实现为一个ActiveX对象
  2. 其他浏览器（Firefox、Safari、Opera…）把它实现为一个本地的JavaScript对象。
  3. XMLHttpRequest在不同浏览器上的实现是兼容的，所以可以用同样的方式访问XMLHttpRequest实例的属性和方法，而不论这个实例创建的方法是什么。
  4. XMLHttpRequest对象方法

    方法

    描述

    abort()

    停止当前请求

    getAllResponseHeaders()

    把http请求的所有响应首部作为键/值对返回

    getResponseHeader("headerLabel")

    返回指定首部的串值

    open(“method”,”url”)

    建立对服务器的调用，method参数可以是GET,POST。url参数可以是相对URL或绝对URL。这个方法还包括3个可选参数。

    send(content)

    向服务器发送请求

    setRequestHeader("label","value")

    把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()
  5. XMLHttpRequest对象属性如下图：

七、第一个AJAX程序：用户名校验

步骤：

  1. 编写后台控制器Servlet程序，用于对客户端请求作出响应。
  2. 编写前台html静态页面。
  3. 编写javascript脚本程序，与服务器进行交互。（AJAX编程）

（1）创建XMLHttpRequest对象

（2）准备好要发送的数据。

（3）发送请求到后台servlet控制器

（4）处理后台程序返回来的数据，使用DOM编程动态添加到页面上。

1、Servlet程序：

package cn.itcast.ajax.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class AjaxServlet
 */
public class AjaxServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
		String username = request.getParameter("username");
		System.out.println(username);
		response.setHeader("Content-Type","text/html; charset=UTF-8");
		if ("admin".equals(username)) {
			response.getOutputStream().write("用户名已存在".getBytes());
		} else {
			response.getOutputStream().write("用户名可以使用".getBytes());
		}
	}

	protected void doPost(HttpServletRequest request,IOException {
		doGet(request,response);
	}

}


2、html静态页面

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="ajaxhtm.js"></script>
</head>
<body>
	<form action="">
		用户名:<input type="text" id="username" name="username" /><input id="submit"
			type="button" onclick="sendDataToServerByHtml()" value="检查用户名是否已经存在" /><span></span><br /> 密码:<input
			type="password" name="userpass" />
	</form>
</body>
</html>

三、JavaScript脚本程序

/*
 * 使用ajax编程异步向服务器端发送请求的步骤：
 * 第一步：创建并初始化XMLHttpRequest对象
 * 第二步：往服务器端发送请求
 * 第三步：处理服务端返回来的数据
 */
// 初始化XMLHttpRequest对象
function createXmlHttpRequest() {
	var xmlhttp = null;
	try {
		// Firefox,Opera 8.0+,Safari
		xmlhttp = new XMLHttpRequest();
	} catch (e) {// IE7.0以下的浏览器以ActiveX组件的方式来创建XMLHttpRequest对象
		var MSXML = [ 'MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP' ];
		for ( var i = 0; i < MSXML.length; i++) {
			try {
				xmlhttp = new ActiveXObject(MSXML[i]);
				break;
			} catch (e) {

			}
		}
	}
	// 返回对象
	return xmlhttp;
}
// 发送请求道服务器端(使用的是html的数据格式向服务器端发送请求)
function sendDataToServerByHtml() {
	// alert("sdhfhs");
	var xhr = createXmlHttpRequest();
	var username = document.getElementById("username").value;
	// 这里使用getElementsByTagName方法得到的是该标签的一个集合数组
	var span = document.getElementsByTagName("span");
	// alert(span[0]);
	// alert(username);
	// 发送请求到服务器端
	xhr.open("get","/ajax/AjaxServlet?username=" + username,true);
	/*
	 * 注意：send方法是在使用post方式提交的时候必须发送的消息内容，
	 * post的请求特点：请求的参数会在请求体中，因此当使用post请求提交的时候就必须使用send方法发送参数
	 * 但是，get的方法提交请求的时候，参数是在地址栏传送过去的，因此send方法可以不用夹带参数，即发送null即可
	 */
	xhr.send(null);
	// 对服务器端传递回来的信息进行处理
	xhr.onreadystatechange = function() {
		// 对象的状态 4表示完成
		if (xhr.readyState == 4) {
			// 200表示信息已经被成功返回，304表示信息没有被修改
			if (xhr.status == 200 || xhr.status == 304) {
				// 开始处理信息
				// alert(xhr.responseText);
				span[0].innerHTML = xhr.responseText;
			}
		}
	};
}

效果图如下：


如需要这个小应用的完整工程请单击下载

这是我个人对AJAX技术的一点小总结，如果我哪些总结的地方写错了，希望大家能指出来，让我改正错误，快速成长起来！

原文链接：https://www.f2er.com/ajax/166087.html

猜你在找的Ajax相关文章

网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
手动实现AJAX
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
axios异步提交表单数据的不同形式
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
php的ajax简单实例
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
Json与Ajax(注册实例）
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
jSon和Ajax登录功能，ajax数据交互案例
ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
关于AjaxControlToolkit的样式问题
网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
一个简单的AJAX实现(HELLO AJAX)
客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
AJAX中文乱码的两类问题及解决之策
1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
实例：AJAX返回xml代码如何在网页中显示
建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作