AJAX最简单的原理以及应用
Ajax是创建快速动态网页的技术，通过后台与服务器少量的数据交互，是网页实现异步更新。也就是在不整个刷新页面的情况下，可以更新网页中的局部区域。
在原始web应用的模式中：
浏览器 以 http的形式向服务器发送请求，然后服务器处理请求，然后以响应（HTML+CSS）数据返回给客户端；
AJXA应用中：
浏览器 以http发送的请求到达AJAX引擎，由Ajax向服务器进行请求发送数据，处理完成后，把数据继续返回给Ajax引擎，再以ＸＭＬ或者字符串数据，返回给浏览器；
ajax.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'ajax.jsp' starting page</title>
<script type="text/javascript">
//声明一个空对象接受XMLHttpRequest
var xmlHttpRequest = null;
function ajaxSubmit()
{//IE浏览器
if(window.ActiveXObject)
{
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{//其他浏览器
xmlHttpRequest = new XMLHttpRequest();
}
if( null != xmlHttpRequest )
{//发送请求
xmlHttpRequest.open("GET","servlet/AjaxServlet",true);//以GET方式向服务发送异步请求
xmlHttpRequest.onreadystatechange = ajaxCallBack; //准备接受
xmlHttpRequest.send(null); //发送请求
}
}
function ajaxCallBack()
{ //接受响应
if(xmlHttpRequest.readyState == 4)//等于4说明服务器向客户端已发送了数据
{
if(xmlHttpRequest.status == 200)//说明发送的数据服务器没有报任何异常
{
var responseText = xmlHttpRequest.responseText; //以Text的形式解析
document.getElementById("div1").innerHTML = responseText; //插入到HTML文档中
}
}
}
</script>
</head>
<body>
<input type="button" value="get content from serve" onclick="ajaxSubmit()"/>
<div id="div1"></div>
</body>
</html>
AjaxServlet.java
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxServlet extends HttpServlet
{
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
response.setContentType("text/html");
PrintWriter out = response.getWriter();
System.out.println("doGet invoked");
out.println("Hello World AJAX");
out.flush();
out.close();
}
}
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>AjaxServlet</servlet-name>
<servlet-class>com.zhaoming.shopping.servlet.AjaxServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AjaxServlet</servlet-name>
<url-pattern>/servlet/AjaxServlet</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>Index.jsp</welcome-file>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
AJAX最简单的原理以及应用的更多相关文章
- Ajax操作如何实现跨域请求 （JSONP和CORS实现Ajax跨域的原理）
由于浏览器存在同源策略机制,同源策略阻止ajax (XMLHttpRequest) 从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 特别的:由于同源策略是浏览器的限制,所以请求的发送和响 ...
- ajax实现简单的点击左侧菜单，右侧加载不同网页
实现:ajax实现点击左侧菜单,右侧加载不同网页(在整个页面无刷新的情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带的服务器中打开浏览效果即可) 原理:ajax的 ...
- .NET程序的简单编译原理
1.不管是什么程序,最终的执行官是CPU,而CPU只认识1和0的机器码. 2.我们现在写的一般是高级语言写的程序.CPU是不认识我们用高级语言写的源代码的,那应该怎么办才能让CPU执行我们写好的程序尼 ...
- Support Vector Machine (1) : 简单SVM原理
目录 Support Vector Machine (1) : 简单SVM原理 Support Vector Machine (2) : Sequential Minimal Optimization ...
- html --- ajax --- javascript --- 简单的封装
Ajax的简单封装 Ajax的全称是AsynchronousJavaScriptAndXML 如有疑问请参考:http://zh.wikipedia.org/zh-cn/AJAX 以及传智播客的视频教 ...
- MVC3.0+knockout.js+Ajax 实现简单的增删改查
MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...
- php+jquery+ajax+json简单小例子
直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...
- 【转】MyBatis接口的简单实现原理
MyBatis接口的简单实现原理 用过MyBatis3的人可能会觉得为什么MyBatis的Mapper接口没有实现类,但是可以直接用? 那是因为MyBatis使用Java动态代理实现的接口. 这里仅仅 ...
- MyBatis接口的简单实现原理
MyBatis接口的简单实现原理 用过MyBatis3的人可能会觉得为什么MyBatis的Mapper接口没有实现类,但是可以直接用? 那是因为MyBatis使用Java动态代理实现的接口. 这里仅仅 ...
随机推荐
- UML学习-活动图创建
活动图(Activity Diagram)可以实现对系统动态行为的建模,主要是将用例细化,即用例内部的细节可以以活动图的方式描述.活动图描述活动的顺序,主要表活动之间的控制流,是内部处理驱动的流程,在 ...
- 【转载】ADO.NET与ORM的比较(2):NHibernate实现CRUD
[转载]ADO.NET与ORM的比较(2):NHibernate实现CRUD 转自周公 说明:个人感觉在Java领域大型开发都离不了ORM的身影,所谓的SSH就是Spring+Struts+Hibe ...
- PHP学习笔记三十三【自定义错误处理器】
<?php //自定义错误处理器 //$errorno 错误号 //$errmes错误信息 //这两个参数是必须的 function my_error($errorno,$errmes) { e ...
- 0124——KVC KVO模式
1.KVC KVC是Key-Value-Coding的简称,它是一种可以直接通过字符串的名 字(key)来访问类属性(实例变量)的机制.而不是通过调用Setter.Getter方法访问.当使用KVO. ...
- [原创]Windows下更改特定后缀名以及特定URL前缀的默认打开方式
Windows下,特定后缀名的文件会由特定的应用程序来运行,比如双击readme.txt,通常情况下会由Windows自带的notepad.exe(记事本)打开文件.如果现在安装了记事本以外的其他文本 ...
- 从外部导入jar包的三种方式
我们在用Eclipse开发程序的时候,经常要用到第三方jar包.引入jar包不是一个小问题,由于jar包位置不清楚,而浪费时间.下面配图说明3种Eclipse引入jar包的方式. 1.最常用的普通操作 ...
- uploadify ，前端页面获取值，json，ajax
针对这几月的技术,做一次小总结 上传控件uploadify function inexel() { $("#btnExcel").uploadify({ 'method': 'po ...
- oracle中anyData数据类型的使用实例
---创建waterfallcreate or replace type waterfall is object(name varchar2(30),height number); --创建river ...
- 【solr专题之二】配置文件：solr.xml solrConfig.xml schema.xml
1.关于默认搜索域 If you are using the Lucene query parser, queries that don't specify a field name will use ...
- NopCommerce 3.3中文语言包发布下载及使用
NopCommerce 3.3是一套国外优秀的开源电子商务项目,其拥有完整的电子商务功能且具有灵活的配置功能,基于微软最新技术ASP.NET MVC 5.1.1,EntityFramework.6.1 ...