后台(22)——AJAX
发布日期:2021-06-30 11:17:54 浏览次数:2 分类:技术文章

本文共 2534 字,大约阅读时间需要 8 分钟。




版权声明

  • 本文原创作者:
  • 作者博客地址:

AJAX简介

AJAX(Asynchronous JavaScript And XML)不是一种新的编程语言,它指的是异步JavaScript。利用AJAX可在不重新加载整个页面的情况下与服务器通信并更新部分网页。


XMLHttpRequest

AJAX 的核心是XMLHttpRequest,它是一种支持异步请求的技术。也就是说:在JavaScript中利用XMLHttpRequest可向服务器提出请求并处理响应且不阻塞用户当前操作。

XMLHttpRequest的创建

目前,市面上的大部分浏览器都支持XMLHttpRequest ,但是有的较老的浏览器比如:IE5和IE6却不支持。

所以,可以这么做:

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"); }

XMLHttpRequest的常用方法

open(method,url,async)

建立与服务器的连接

method:指定请求方式,比如GET、POST;常用GET方式

url:请求的地址
async:是否使用异步方式请求,默认为true

send(string)

将请求发送到服务器

如果是GET请求那么参数string为null,如果是POST请求那么利用string携带请求参数

setRequestHeader(header,value)

设置请求消息头;很少用到

XMLHttpRequest的常用属性

readyState

readyState用于标识XMLHttpRequest的状态信息

readyState=0表示XMLHttpRequest对象未完成初始化,即刚创建。

readyState=1表示XMLHttpRequest对象开始发送请求;即调用了open方法,但还没有调用send方法,请求还没有发出

readyState=2表示XMLHttpRequest对象的请求发送完成;即send方法已经调用,数据已经提交到服务器,但没有收到任何响应

readyState=3表示XMLHttpRequest对象开始读取响应,还没有结束;即收到了响应消息头,但响应正文还没有收到

readyState=4表示XMLHttpRequest对象读取响应结束,响应消息头和响应正文都已收到

responseText

获得响应的文本内容

responseXML

获得响应的XML文档对象

status

status用于标识Http请求的响应状态码

200 服务器响应正常

400 无法找到请求的资源
403 没有访问权限
404 访问的资源不存在
500 服务器内部错误

XMLHttpRequest的回调函数

每当readyState属性值改变时onreadystatechange函数就会被执行。所以我们可以在该函数中执行一些监听,比如:readyState=4而且status=200时处理服务器返回的数据


XMLHttpRequest使用示例

首先,我们写一个简单的jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
测试AJAX

其中xmlhttprequest.js如下:

function getXMLHttpRequest(){
var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } return xmlhttp;}

然后,我们再写一个非常简单的Servlet

/** * 本文作者:谷哥的小弟 * 博客地址:http://blog.csdn.net/lfdfhl */package cn.com;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 TestAJAXServlet extends HttpServlet{
@Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { PrintWriter writer = resp.getWriter(); writer.print("Hello AJAX"); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { }}

运行后效果如下图所示:

这里写图片描述

转载地址:https://it9527.blog.csdn.net/article/details/55820580 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:后台(23)——Listener
下一篇:后台(21)——DBUtils

发表评论

最新留言

关注你微信了!
[***.104.42.241]2024年04月16日 11时33分02秒