当前位置： 移动技术网 > IT编程>开发语言>JavaScript > AJAX（一）AJAX入门

AJAX（一）AJAX入门

2020年07月17日  | 移动技术网IT编程  | 我要评论

文章目录

一、什么是AJAX？

AJAX（Asynchronous JavaScript and XML） 是一种用于创建快速动态网页的技术。
AJAX 通过JS发起异步请求，使网页实现异步更新，无需重新加载整个网页的情况下更新部分网页。

二、AJAX请求

AJAX 依赖 XMLHttpRequest
XMLHttpRequest 用于在后台与服务器交换数据

Ⅰ、新建XMLHttpRequest对象

JavaScript代码

//IE7+、Firefox、Chrome、Safari 以及 Opera
var XHRObj = new XMLHttpRequest();

//IE7以前的老版本浏览器
var XHRObj = new ActiveXObject("Microsoft.XMLHTTP");

//因此需要使用if判断浏览器的版本并写两个方法以适应不同情况
var XHRObj;
if (window.XMLHttpRequest){
	XHRObj = new XMLHttpRequest();
  }
else{
	XHRObj = new ActiveXObject("Microsoft.XMLHTTP");
  }

※、XMLHttpRequest对象的属性

属性 描述
onreadystatechange readyState改变就会调用
readyState 0请求未初始化
1连接建立
2请求接收
3请求处理
4请求和响应完成
status 200已就绪
400未找到

Ⅱ、设置请求参数并发送

XHRObj.open(method,url,async);
XHRObj.send();
参数 描述
method 请求类型
GET/POST
url 文件位置
async 请求同步/异步
false/true

Ⅲ、获得响应

//获得字符串响应
XHRObj.responseText
//获得XML响应
XHRObj.responseXML

Ⅳ、获取返回数据——绑定onreadstatechange事件

//判断响应已就绪且连接到了指定服务器

XHRObj.onreadystatechange = function(){
	if(XHRObj.readyState == 4 && XHRObj.status == 200){
		XHRObj.responseText;
	}
}

三、实例——点击显示字符串

Servlet

package com.servlet;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class AjaxServlet extends BaseServlet {


    protected void jsAjax(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String info = "HelloWorld!";
        response.getWriter().write(info);
    }
}

web.xml

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
  <servlet>
    <servlet-name>AjaxServlet</servlet-name>
    <servlet-class>com.servlet.AjaxServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>AjaxServlet</servlet-name>
    <url-pattern>/AjaxServlet</url-pattern>
  </servlet-mapping>
</web-app>	


<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>This is for test</title>
        <script type="text/javascript">
            function ajax() {
                var XHRObj;
                //判断浏览器
                if (window.XMLHttpRequest){
                    XHRObj = new XMLHttpRequest();
                }
                else{
                    XHRObj = new ActiveXObject("Microsoft.XMLHTTP");
                }
                //打开servlet文件，执行方法
				XHRObj.open("GET","http://localhost:8080/javaWeb_Repository_war_exploded/AjaxServlet?action=jsAjax");
				//绑定
                XHRObj.onreadystatechange = function() {
                    if(XHRObj.readyState == 4 && XHRObj.status == 200){
                        document.getElementById("here").innerHTML = XHRObj.responseText;
                    }
                };
                XHRObj.send()；
            }
        </script>
    </head>

    <body>
    	//接收对象
    	<div id = "here"><h1></h1></div>
    	<button type = "button" onclick="ajax()">Click!</button>
    </body>
</html>

在这里插入图片描述
在这里插入图片描述

完

欢迎在评论区留言
感谢浏览

本文地址：https://blog.csdn.net/Xxy605/article/details/107375757

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网