AJAX的技术简单演示和基本的原理(4部曲)

最新推荐文章于 2023-11-07 14:28:18 发布

程序员小天仙

最新推荐文章于 2023-11-07 14:28:18 发布

阅读量301

点赞数

分类专栏： Java 文章标签： ajax的基本用法如何使用ajax ajax前端技术和基本的步骤

本文链接：https://blog.youkuaiyun.com/qq_35307947/article/details/82994508

版权

Java 专栏收录该内容

37 篇文章

订阅专栏

本文深入讲解Ajax技术，包括其组成部分、工作原理、状态属性及GET和POST方式的应用实例，适合前端开发者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax</title>
<script type="text/javascript">
    /*需求:把输入框中的name值用ajax提交到后台ValServlet进行校验，
    把结果返回到当前页面的div中显示 */

    //GET方式///
    function check1(obj){
   var name = obj.value;

   //1创建一个ajax对象
   var xhr=null;
   ///下面这一段是跨浏览器支持///
   if(window.XMLHttpRequest){//高版本IE,火狐，google等
       xhr = new XMLHttpRequest();
   }else{//低版本IE等
       xhr = new ActiveXObject("Microsoft.XMLHttp");
   }

   //2设置通讯方式--get/post, 异步否?
   var url="<c:url value='/ValServlet?name="+name+"&age=20'/>";
   xhr.open("GET", url, true);//异步
   //xhr.open("GET", url, false);//同步

   //3设置回调函数(访问成功后该调用什么js代码--进行反调父页中的js函数:succ,failure)
   //每次xhr.readyState属性值变化都会自动调用onreadystatechange()函数
   xhr.onreadystatechange=function(){
       if(xhr.readyState==4){//服务器的响应消息已经接收完毕
           if(xhr.status==200){//服务器正常响应
               var txt = xhr.responseText;
               //alert("服务器正常应答的消息: "+txt);
               success(txt);
           }else{//错误响应
               //alert("服务器应答的错误代码: "+xhr.status);
           failure(xhr.status);
           }
       }
   };

   //4触发发送动作
   xhr.send(null); //其中的参数是发送的数据。GET方式中没有，因为它的数据是在url的末尾给的

   //若同步时，必须是上面的ajax回调方法执行完毕之后，才会执行下面的代码。异步时不会等，send()之后会立刻执行
   alert("Ajax校验之后的代码....");
}

function success(txt){
   div1.innerHTML="服务器正常应答的消息: "+txt;
}
function failure(num){
   div1.innerHTML="服务器应答的错误代码:"+num;
}



    //POSTT方式///
    function check2(obj){
   var name = obj.value;

   //1创建一个ajax对象
   var xhr=null;
   ///下面这一段是跨浏览器支持///
   if(window.XMLHttpRequest){//高版本IE,火狐，google等
       xhr = new XMLHttpRequest();
   }else{//低版本IE等
       xhr = new ActiveXObject("Microsoft.XMLHttp");
   }

   //2设置通讯方式--get/post, 异步否?
   var url="<c:url value='/ValServlet'/>"; //※※※post方式下，url中不带参数数据
   xhr.open("POST", url, true);//异步 //※※※
   //xhr.open("POST", url, false);//同步

   //3设置回调函数(访问成功后该调用什么js代码--进行反调父页中的js函数:succ,failure)
   //每次xhr.readyState属性值变化都会自动调用onreadystatechange()函数
   xhr.onreadystatechange=function(){
       if(xhr.readyState==4){//服务器的响应消息已经接收完毕
           if(xhr.status==200){//服务器正常响应
               var txt = xhr.responseText;
               //alert("服务器正常应答的消息: "+txt);
               success2(txt);
           }else{//错误响应
               //alert("服务器应答的错误代码: "+xhr.status);
           failure2(xhr.status);
           }
       }
   };
   //※※※POST方式时，必须设置一个内容类型请求头※※※
   xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

   //4触发发送动作
   xhr.send("name="+name+"&age=20"); //※※※POST方式下，要发送的数据在此以参数的方式给。

   //若同步时，必须是上面的ajax回调方法执行完毕之后，才会执行下面的代码。异步时不会等，send()之后会立刻执行
   alert("Ajax校验之后的代码....");
}

function success2(txt){
   div2.innerHTML="服务器正常应答的消息: "+txt;
}
function failure2(num){
   div2.innerHTML="服务器应答的错误代码:"+num;
}


</script>


</head>

<body>
<h2>Ajax技术演示1---没有封装</h2>
<pre>
Ajax技术介绍:
全称: Asynchronized(异步) JavaScript And Xml
技术组成: Javascript、DOM、CSS 和 XMLHttpRequest(或ActiveXObject)

xhr.readyState属性值:
0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
1 (初始化) 对象已建立，尚未调用send方法
2 (发送数据) send方法已调用，但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
</pre>

<form action="">
<h3>GET方式的ajax技术演示</h3>
Name:<input type="text" name="name" οnblur="check1(this);"/>
<div id="div1"></div>
<br>
</form>
<br><br><br>

<form action="">
<h3>POST方式的ajax技术演示</h3>
Name:<input type="text" name="name" οnblur="check2(this);"/>
<div id="div2"></div>
<br>
</form>


</body>
</html>