AJAX:如何编写一个关于AJAX的Hello World?(ajax发送异步请求(四步操作))

2024-06-23 18:18

本文主要是介绍AJAX:如何编写一个关于AJAX的Hello World?(ajax发送异步请求(四步操作)),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

用到的一个Servlet类:

package cn.edu.web.servlet;import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;@WebServlet("/AServlet")
public class AServlet extends HttpServlet {private static final long serialVersionUID = 1L;protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//设置编码response.setContentType("text/html;charset=utf-8");//在控制台输出Hello AJAXSystem.out.println("Hello AJAX");//在浏览器里面点击按钮局部刷新后输出response.getWriter().print("Hello AJAX<br />"+"服务器响应了页面的局部刷新,这就是AJAX");}
}


ajax的jsp代码:

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>AJAX的Hello World</title>
<script type="text/javascript">
//创建异步对象的函数
function createXMLHttpRequest(){try {return new XMLHttpRequest();//大多数浏览器} catch (e) {try {return ActiveXObject("Msxml2.XMLHTTP");//IE6.0} catch (e) {try {return ActiveXObject("Micrsoft.XMLHTTP");//IE5.5} catch (e) {alert("哥们儿,你用的是什么浏览器啊?");//太古老了throw e;}}}
}window.onload = function(){//文档加载完毕后执行var btn = document.getElementById("btn");btn.onclick = function(){//给按钮的点击事件注册监听器/*AJAX四步操作,得到服务器的响应把响应结果显示到h1元素中*///1.得到异步对象var xmlHttp = createXMLHttpRequest();//调用创建xmlhttp的函数/*2.打开与服务器的连接*指定请求方式*指定请求的URL*指定是否为异步请求//注意:到客户端时已经没有了jsp,jstl等标签,服务器处理为了html*///服务器吧jsp变成了html发送过来了xmlHttp.open("GET","<c:url value='/AServlet' />",true);//3.发送请求xmlHttp.send(null);//GET请求没有请求体,但也要给出null,不然FireFox可能不能发送//4.给异步对象的onreadystatechange事件注册监听器xmlHttp.onreadystatechange = function(){//当xmlHttp的状态发生变化时执行//双重判断:xmlHttp的状态为4(服务器响应结束),以及服务器状态码为200(服务器响应成功)if(xmlHttp.readyState==4&&xmlHttp.status==200){//获取服务器响应内容var text = xmlHttp.responseText;//获取h1元素var h1 = document.getElementById("h1");h1.innerHTML = text;}}}}
</script>
</head>
<body><button id="btn">点击这里</button><h1 id="h1"></h1>
</body>
</html>

浏览器的效果如下(点击这里之后)

ajax发送异步请求(四步操作)

1. 第一步(得到XMLHttpRequest)
  * ajax其实只需要学习一个对象:XMLHttpRequest,如果掌握了它,就掌握了ajax!!!
  * 得到XMLHttpRequest
    > 大多数浏览器都支持:var xmlHttp = new XMLHttpRequest();
    > IE6.0:var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    > IE5.5以更早版本的IE:var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

  * 编写创建XMLHttpRequest对象的函数
  function createXMLHttpRequest() {
      try {
          return new XMLHttpRequest();
      } catch(e) {
          try {
          return new ActiveXObject("Msxml2.XMLHTTP");
      } catch(e) {
          try {
              return new ActiveXObject("Microsoft.XMLHTTP");
          } catch(e) {
              alert("哥们儿,你用的是什么浏览器啊?");
              throw e;
          }
      }
      }
  }

2. 第二步(打开与服务器的连接)
  * xmlHttp.open():用来打开与服务器的连接,它需要三个参数:
    > 请求方式:可以是GET或POST
    > 请求的URL:指定服务器端资源,例如;/day23_1/AServlet
    > 请求是否为异步:如果为true表示发送异步请求,否则同步请求!
  * xmlHttp.open("GET", "/day23_1/AServlet", true);

3. 第三步(发送请求)
  * xmlHttp.send(null):如果不给可能会造成部份浏览器无法发送!
    > 参数:就是请求体内容!如果是GET请求,必须给出null。

4. 第四步()
  * 在xmlHttp对象的一个事件上注册监听器:onreadystatechange
  * xmlHttp对象一共有5个状态:
    > 0状态:刚创建,还没有调用open()方法;
    > 1状态:请求开始:调用了open()方法,但还没有调用send()方法
    > 2状态:调用完了send()方法了;
    > 3状态:服务器已经开始响应,但不表示响应结束了!
    > 4状态:服务器响应结束!(通常我们只关心这个状态!!!)
  * 得到xmlHttp对象的状态:
    > var state = xmlHttp.readyState;//可能是0、1、2、3、4
  * 得到服务器响应的状态码
    > var status = xmlHttp.status;//例如为200、404、500
  * 得到服务器响应的内容1
    > var content = xmlHttp.responseText;//得到服务器的响应的文本格式的内容
    > var content = xmlHttp.responseXML;//得到服务器的响应的xml响应的内容,它是Document对象了!

  xmlHttp.onreadystatechange = function() {//xmlHttp的5种状态都会调用本方法
      if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//双重判断:判断是否为4状态,而且还要判断是否为200
          // 获取服务器的响应内容
      var text = xmlHttp.responseText;
      }
  };


这篇关于AJAX:如何编写一个关于AJAX的Hello World?(ajax发送异步请求(四步操作))的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1087909

相关文章

如何编写Linux PCIe设备驱动器 之二

如何编写Linux PCIe设备驱动器 之二 功能(capability)集功能(capability)APIs通过pci_bus_read_config完成功能存取功能APIs参数pos常量值PCI功能结构 PCI功能IDMSI功能电源功率管理功能 功能(capability)集 功能(capability)APIs int pcie_capability_read_wo

easyui同时验证账户格式和ajax是否存在

accountName: {validator: function (value, param) {if (!/^[a-zA-Z][a-zA-Z0-9_]{3,15}$/i.test(value)) {$.fn.validatebox.defaults.rules.accountName.message = '账户名称不合法(字母开头,允许4-16字节,允许字母数字下划线)';return fal

js异步提交form表单的解决方案

1.定义异步提交表单的方法 (通用方法) /*** 异步提交form表单* @param options {form:form表单元素,success:执行成功后处理函数}* <span style="color:#ff0000;"><strong>@注意 后台接收参数要解码否则中文会导致乱码 如:URLDecoder.decode(param,"UTF-8")</strong></span>

动手学深度学习【数据操作+数据预处理】

import osos.makedirs(os.path.join('.', 'data'), exist_ok=True)data_file = os.path.join('.', 'data', 'house_tiny.csv')with open(data_file, 'w') as f:f.write('NumRooms,Alley,Price\n') # 列名f.write('NA

线程的四种操作

所属专栏:Java学习        1. 线程的开启 start和run的区别: run:描述了线程要执行的任务,也可以称为线程的入口 start:调用系统函数,真正的在系统内核中创建线程(创建PCB,加入到链表中),此处的start会根据不同的系统,分别调用不同的api,创建好之后的线程,再单独去执行run(所以说,start的本质是调用系统api,系统的api

Java IO 操作——个人理解

之前一直Java的IO操作一知半解。今天看到一个便文章觉得很有道理( 原文章),记录一下。 首先,理解Java的IO操作到底操作的什么内容,过程又是怎么样子。          数据来源的操作: 来源有文件,网络数据。使用File类和Sockets等。这里操作的是数据本身,1,0结构。    File file = new File("path");   字

MySQL——表操作

目录 一、创建表 二、查看表 2.1 查看表中某成员的数据 2.2 查看整个表中的表成员 2.3 查看创建表时的句柄 三、修改表 alter 3.1 重命名 rename 3.2 新增一列 add 3.3 更改列属性 modify 3.4 更改列名称 change 3.5 删除某列 上一篇博客介绍了库的操作,接下来来看一下表的相关操作。 一、创建表 create

javascript实现ajax

什么是 ajax ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取。 http 请求 首先需要了解 http 请求的方法(GET 和 POST)。 GET 用于获取数据。GET 是在 URL 中传递数据,它的安全性低,容量低。 POST 用于上传数据。POST 安全性一般,容量几乎无限。 aj

Android中如何实现adb向应用发送特定指令并接收返回

1 ADB发送命令给应用 1.1 发送自定义广播给系统或应用 adb shell am broadcast 是 Android Debug Bridge (ADB) 中用于向 Android 系统发送广播的命令。通过这个命令,开发者可以发送自定义广播给系统或应用,触发应用中的广播接收器(BroadcastReceiver)。广播机制是 Android 的一种组件通信方式,应用可以监听广播来执行

封装MySQL操作时Where条件语句的组织

在对数据库进行封装的过程中,条件语句应该是相对难以处理的,毕竟条件语句太过于多样性。 条件语句大致分为以下几种: 1、单一条件,比如:where id = 1; 2、多个条件,相互间关系统一。比如:where id > 10 and age > 20 and score < 60; 3、多个条件,相互间关系不统一。比如:where (id > 10 OR age > 20) AND sco