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最简单的原理以及应用的更多相关文章

  1. Ajax操作如何实现跨域请求 （JSONP和CORS实现Ajax跨域的原理）

    由于浏览器存在同源策略机制,同源策略阻止ajax (XMLHttpRequest) 从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 特别的:由于同源策略是浏览器的限制,所以请求的发送和响 ...

  2. ajax实现简单的点击左侧菜单，右侧加载不同网页

    实现:ajax实现点击左侧菜单,右侧加载不同网页(在整个页面无刷新的情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带的服务器中打开浏览效果即可) 原理:ajax的 ...

  3. .NET程序的简单编译原理

    1.不管是什么程序,最终的执行官是CPU,而CPU只认识1和0的机器码. 2.我们现在写的一般是高级语言写的程序.CPU是不认识我们用高级语言写的源代码的,那应该怎么办才能让CPU执行我们写好的程序尼 ...

  4. Support Vector Machine (1) : 简单SVM原理

    目录 Support Vector Machine (1) : 简单SVM原理 Support Vector Machine (2) : Sequential Minimal Optimization ...

  5. html --- ajax --- javascript --- 简单的封装

    Ajax的简单封装 Ajax的全称是AsynchronousJavaScriptAndXML 如有疑问请参考:http://zh.wikipedia.org/zh-cn/AJAX 以及传智播客的视频教 ...

  6. MVC3.0+knockout.js+Ajax 实现简单的增删改查

    MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...

  7. php+jquery+ajax+json简单小例子

    直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

  8. 【转】MyBatis接口的简单实现原理

    MyBatis接口的简单实现原理 用过MyBatis3的人可能会觉得为什么MyBatis的Mapper接口没有实现类,但是可以直接用? 那是因为MyBatis使用Java动态代理实现的接口. 这里仅仅 ...

  9. MyBatis接口的简单实现原理

    MyBatis接口的简单实现原理 用过MyBatis3的人可能会觉得为什么MyBatis的Mapper接口没有实现类,但是可以直接用? 那是因为MyBatis使用Java动态代理实现的接口. 这里仅仅 ...

随机推荐

  1. 玩程序 之 一 . 字符串处理工具（可通过C#脚本扩展）

    平常喜欢写点小东西玩玩,既可以娱乐自己满足自己的虚荣心,又可以方便工作和学习,今天且拿出一个来,与大家一起分享!  1. 软件介绍 言归正传,先看看需求,有这样一串字符串 abc,def,ghi,jk ...

  2. HDU 4121 Xiangqi （算是模拟吧）

    传送门:http://acm.hdu.edu.cn/showproblem.php?pid=4121 题意:中国象棋对决,黑棋只有一个将,红棋有一个帅和不定个车 马 炮冰给定位置,这时当黑棋走,问你黑 ...

  3. [Regular Expressions] Match the Start and End of a Line

    We can use: ^: match the beginning $: match the end Let's say we have the string like the following: ...

  4. 编程算法 - 圆圈中最后剩下的数字(递推公式) 代码(C++)

    圆圈中最后剩下的数字(递推公式) 代码(C++) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 0,1...,n-1这n个数字排成一个圆圈, 从数字0開始 ...

  5. iOS:UI系列之UIScrollview和UIPagecontrol

    转眼间,又是一天,就这样忙忙碌碌的一天一天的过着, 不过还好,不是浑浑噩噩的,也算是小有所成,劳有所获吧,嘿嘿! 好了,到了总结的时间啦, 下面就为大家简单讲解下我今天学习的内容吧,希望对各位都有所帮 ...

  6. ASP.Net请求处理机制初步探索之旅 - Part 1 前奏(转)

        在读本文之前建议先阅读IIS架构:http://www.cnblogs.com/tiantianle/p/5079932.html     不管是ASP.Net WebForm还是ASP.Ne ...

  7. EffectiveC#18--用IComparable和IComparer实现对象的顺序关系

    1..Net框架提供了接口来描述对象的顺序关系:IComparable 和IComparer. 2.IComparable 为类定义了自然顺序,实现IComparer接口的类可以描述其它可选的顺序 3 ...

  8. BOM 窗体相关属性以及页面可见区域的获取方式

    1 在IE Safari Oper Chrome 都提供了screenLeft和screenTop属性: screenLeft : 相对于屏幕左边的距离 screenTop : 相对于屏幕上边的距离 ...

  9. Html5+css3实现3D转动效果

    由于最近一直在忙着筹划去上海工作的事情,所以博客更新的速度也就慢了下来.前几天面试了几家公司,也拿到几份offer,总结了一些面试中遇到的问题,最近整理一下会和大家一起分享.今天呢,就和大家分享一下前 ...

  10. Android SQLite的使用2（非原创）

    1.数据库的增.删.改.查:execSQL方法 public void insertAction() {//添加信息 db.execSQL("insert into Emp(name,sal ...