1、介绍

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

2、创建一个简单的实例、由于ajax为数据交互技术、所以首先需要有一个被调用的后台接口或是可以远程调用的接口、这里我们自己创建一个简单的实例

package myajax;

import java.io.IOException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.liferay.portal.kernel.json.JSONObject;

public class MyServlet extends HttpServlet  {

    /**

     *

     */

    private static final long serialVersionUID = 1L;

    public void init(){};

    public void doGet(HttpServletRequest request, HttpServletResponse response) {

        this.doPost(request, response);

    };

    public void doPost(HttpServletRequest request, HttpServletResponse response){

        response.setContentType("text/html;utf-8");

        response.setCharacterEncoding("utf-8");

        String out = "";

        String type = request.getParameter("type");

        if("ajax".equals(type)){

            out=myAjax();

        }

        try {

            response.getWriter().write(out);

            response.getWriter().flush();

            response.getWriter().close();

        } catch (IOException e) {

            e.printStackTrace();

        }

    }

    private String myAjax() {

        String str = "ajax调用小例子QAQ";

        return str ;

    };

}

这里提供了一个供调用的url :http://127.0.0.1:8080/we/myservlet?type=ajax

2、页面ajax

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting page</title>

    <meta http-equiv="pragma" content="no-cache">

    <meta http-equiv="cache-control" content="no-cache">

    <meta http-equiv="expires" content="0">

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="This is my page">

    <!--

    <link rel="stylesheet" type="text/css" href="styles.css">

    -->

    <script type="text/javascript">

    function sentGet(){

        //创建ajax对象

        var xmlhttp;

        if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari

          xmlhttp=new XMLHttpRequest();

        }else{// code for IE6, IE5

          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

        }

        //发送请求

        xmlhttp.open("GET","http://127.0.0.1:8080/we/myservlet?type=ajax",true);

        xmlhttp.send();

        xmlhttp.onreadystatechange=function(){

              if (xmlhttp.readyState==4 && xmlhttp.status==200){

                document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

            }

        }

    };

    </script>

  </head>

  <body>

          <button onclick="sentGet();" >发送AJAX请求</button>

        <div id="myDiv"></div>

  </body>

</html>

这里 、我们发送ajax请求、并实现局部刷新！    到此整个ajax的简单流程结束.

ajax最基础入门的更多相关文章

  1. ajax基础入门

    补充一下Ajax的使用方法 //可以复制下面两种方法在百度上实验 //jquery的使用方法 $.ajax({ url:"index.php", success:function( ...

  2. SpringMVC基础入门

    一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要的jar包. 2.添加Web.xml配置文件中关于SpringMVC的配置 1 2 3 4 5 6 ...

  3. 从零基础入门JavaScript（1）

    从零基础入门JavaScript(1) 1.1  Javascript的简史 1995年的时候   由网景公司开发的,当时的名字叫livescript    为了推广自己的livescript,搭了j ...

  4. SpringMVC基础入门，创建一个HelloWorld程序

    ref:http://www.admin10000.com/document/6436.html 一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要 ...

  5. jQuery:自学笔记(1)——基础入门

    jQuery:自学笔记(1)——基础入门 认识JQuery 1.jQuery概述 jQuery是一个快速.小巧 .功能丰富的JavaScript函数库.它可以实现“写的少,做的多”的目标. jQuer ...

  6. ECMAScript 6.0基础入门教程

    ECMAScript 6.0基础入门教程 转:https://blog.csdn.net/hexinyu_1022/article/details/80778727 https://blog.csdn ...

  7. js语法基础入门（1）

    1.基础入门 1.1.hello world 1.1.1.JavaScript是什么? JavaScript是一门跨平台.面向对象的轻量级脚本语言,在web开发中被广泛应用 1.1.2.JavaScr ...

  8. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  9. 「译」JUnit 5 系列：基础入门

    原文地址:http://blog.codefx.org/libraries/junit-5-basics/ 原文日期:25, Feb, 2016 译文首发:Linesh 的博客:JUnit 5 系列: ...

随机推荐

  1. Servlet 生命周期、工作原理-是单实例多线程

    Servelet是单实例多线程的 参考:servlet单实例多线程模式 一.Servlet生命周期 大致分为4部:Servlet类加载-->实例化-->服务-->销毁 1.Web C ...

  2. 怎样实现在DBGrid中双击选择整行，并且可以多选？谢谢！！

    DBGrid1->Options里有个dgMultiSelect,把它设为true就能多选了 先设置DBGrid1->options中dgRowSelect = true, dgMulti ...

  3. jQuery最新CDN调用地址 更新(201902)

    收集最新的jQuery地址,直接调用. 关于如何选择什么版本: https://www.cnblogs.com/osfipin/p/6211468.html 下面是收集的最新版本: 官方//code. ...

  4. [BZOJ2957] [THU2013集训] 楼房重建

    套路套路套路套路套路套路套路套路套路套路... 我只能这么说:一道裸得只剩下套路的水题... 线段树维护单调栈,显然,能够看到的楼房一定是递增的,但不是按高度递增,而是按高度和坐标的比值递增 所以我们 ...

  5. 【bzoj1030】 JSOI2007—文本生成器

    http://www.lydsy.com/JudgeOnline/problem.php?id=1030 (题目链接) 题意 给出$n$个单词,问有多少个长度为$m$的文本中至少包含一个单词. Sol ...

  6. 【POJ2728】Desert King 最优比率生成树

    题目大意:给定一个 N 个点的无向完全图,边有两个不同性质的边权,求该无向图的一棵最优比例生成树,使得性质为 A 的边权和比性质为 B 的边权和最小. 题解:要求的答案可以看成是 0-1 分数规划问题 ...

  7. java回顾（项目前期的基本准备）

    一.     基础回顾 1   集合 1.1 集合的类型与各自的特性 ---|Collection: 单列集合 ---|List: 有存储顺序, 可重复 ---|ArrayList:  数组实现, 查 ...

  8. python操作txt文件中数据教程[3]-python读取文件夹中所有txt文件并将数据转为csv文件

    python操作txt文件中数据教程[3]-python读取文件夹中所有txt文件并将数据转为csv文件 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考文献 python操作txt文件中 ...

  9. bzoj千题计划230：bzoj3205: [Apio2013]机器人

    http://www.lydsy.com/JudgeOnline/problem.php?id=3205 历时一天,老子终于把它A了 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 因为不懂spfa ...

  10. 自定义泛型_无多态_通配符无泛型数组_jdk7泛型使用

    通配符 T, K, V, E 等泛型字母为有类型, 类型参数赋予具体的值 ? 未知类型 类型参数赋予不确定值, 任意类型 只能用在 声明类型上,方法参数上, 不能用在定义泛型类上 上限 extends ...