Ajax入门

最新推荐文章于 2024-10-18 15:50:05 发布
最新推荐文章于 2024-10-18 15:50:05 发布
阅读量115 收藏
点赞数
分类专栏： 笔记 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yucan1234/article/details/105602973
版权

Ajax：异步js和xml

    异步刷新：如果网页中某一个地方需要修改，异步刷新可以使：只刷新需要修改的地方，而页面其他地方保持不变

实现方法

1.js：

    XMLHttpRequest对象

    XMLHttpRequest对象的方法：
        open（方法名（提交方式get/post），服务器地址，true）：与服务器建立连接（true代表异步刷新，false为同步）
        send():
                get: send(null)
                post: send(参数值)
        setRequestHeader（header，value）：
                get：不需要设置此方法
                post：需要设置：
                        a.如果请求元素包含了文件上传
setRequestHeader(“content-Type”，“multiparty/form-data”)
                        b.不包含文件上传
setRequestHeader(“content-Type”，“application/x-www-form-urlencoded”)

        XMLHttpRequest对象的属性值：
                readystate:请求状态 只有状态是4的时候代表请求完毕
在这里插入图片描述
                status：响应状态：
在这里插入图片描述
                onreadytatechange： 回调函数
                responseText： 相应格式是String格式
                responseXML: 相应格式是xml格式

程序功能：
        用户输入一个电话，如果为123456789则显示已经注册，其他则提示注册成功（post方法）

代码演示
index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charst=UTF-8">
      <script type="text/javascript">
        function register() {
            var mobile=document.getElementById("mobile").value;
            //通过Ajax异步方式请求服务端
            xmlHttpRequest=new XMLHttpRequest();
            //设置xmlHttpResquest对象的回调函数
            xmlHttpRequest.onreadystatechange=callBack;   //方法的引用，不用写括号

            xmlHttpRequest.open("post","MobileServlet",true);
            //设置post方式的头信息
            xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xmlHttpRequest.send("mobile="+mobile);
        }
        //定义回调函数（接受服务器的返回值）
        function callBack() {
            if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
                //接受服务器返回的数据
                var data=xmlHttpRequest.responseText;    //服务端返回值为String格式
                if(data=="true"){
                    alert("此号码已存在，请更换")
                }else {
                    alert("注册成功")
                }
            }
        }
      </script>
    <title>$Title$</title>
  </head>
  <body>
  <input id="mobile"/>
  <br/>
  <input type="button" value="注册" onclick="register()"/>
  </body>
</html>

MobileServlet.java

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/MobileServlet")
public class MobileServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding( "utf-8" );
        resp.setCharacterEncoding( "utf-8" );
        resp.setContentType( "text/html;charset=UTF-8" );
        String mobile=req.getParameter( "mobile" );

        PrintWriter out=resp.getWriter();
        if("123456789".equals(mobile)){
            out.write( "true" );            //servlet以输出流的方式，将信息返回给客户端
        }else {
            out.write( "false" );
        }
        out.close();        //关闭输出流
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet( req,resp );
    }
}

get方式：（修改index.jsp的第13行）

xmlHttpRequest.open("get","MobileServlet?mobile="+mobile,true);
xmlHttpRequest.send(null);

2.jQuery：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charst=UTF-8">
  <script type="text/javascript" src="js/jquery-3.5.0.js"></script>
  <script type="text/javascript">
      function register() {
          var $mobile=$("#mobile").val();
          $.ajax({
              url:"MobileServlet",
              请求方式:"post",
              data:"mobile="+$mobile,
              success:function(result){
                  if(result=="true"){
                      alert("已存在！注册失败！");
                  }else{
                      alert("注册成功！");
                  }
              },
              error:function(){
                  alert("系统异常！");
              }
          })
      }
  </script>
  <title>$Title$</title>
</head>
<body>
	<input id="mobile"/>
	<br/>
	<input type="button" value="注册" onclick="register()"/>
</body>
</html>

补充：
get方法
$.get(
    服务器地址：
    请求数据：
    function(result){
    },
    预期返回值类型（String\xml）
);
post方法
$.post(
    服务器地址：
    请求数据：
    function(result){
    },
    预期返回值类型（String\xml）
);
load方法
$("").load(
    服务器地址，
    请求数据，
    function(result){
    }
)

load方法代码演示：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charst=UTF-8">
  <script type="text/javascript" src="js/jquery-3.5.0.js"></script>
  <script type="text/javascript">
      function register() {
          var $mobile=$("#mobile").val();
          $("#tip").load(
              "MobileServlet",
              "mobile="+$mobile
          )
      }
  </script>
  <title>$Title$</title>
</head>
<body>
<input id="mobile"/>
<br/>
<input type="button" value="注册" onclick="register()"/>
<span id="tip"></span>
</body>
</html>

*JSON方式：（返回值是一个JSON格式的数据）
$.getJSON(

)
代码演示：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charst=UTF-8">
  <script type="text/javascript" src="js/jquery-3.5.0.js"></script>
  <script type="text/javascript">
      function register() {
          var $mobile=$("#mobile").val();
          $.getJSON(
              "MobileServlet",
              {"mobile":$mobile},
              function (result) {
                  if(result.msg=="true"){
                      alert("已存在")
                  }else{
                      alert("注册成功")
                  }
              }
          )
      }
  </script>
  <title>$Title$</title>
</head>
<body>
<input id="mobile"/>
<br/>
<input type="button" value="注册" onclick="register()"/>
<span id="tip"></span>
</body>
</html>

由于返回的是JSON格式，所以不能用String和JSON比较，所以需要修改MobileServlet的内容，使返回值变成JSON类型

if("13026373922".equals(mobile)){
            out.write( "{\"msg\":\"true\"}" );
        }else {
            out.write( "{\"msg\":\"false\"}" );
        }
yucan1234
关注
专栏目录
ajax经典入门详解
11-06
ajax经典入门详解
AJAX入门
05-24
**AJAX 入门** AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术使得网页更具交互性和响应性，改善了用户体验。AJAX 不是单一的新技术，而是多种...
AJAX入门这一篇就够了
weixin_34253126的博客
02-13 3795
什么是Ajax Ajax(Asynchronous JavaScript and XML) 异步JavaScript和XML Ajax实际上是下面这几种技术的融合： (1)XHTML和CSS的基于标准的表示技术 (2)DOM进行动态显示和交互 (3)XML和XSLT进行数据交换和处理 (4)XMLHttpRequest进行异步数据检索 (5)Javascript将以上技术融合在一起 客户端与服...
ajax入门
yfy的博客
10-10 423
目录 一、ajax概述 1.什么是ajax 2.ajax的应用场景 3.同步与异步的区别 二、js原生的ajax 1.开发步骤 2.代码实现 三、jQuery中的ajax 1.load()方法 2.GET请求 3.POST请求 4.AJAX请求 四、json数据格式 1.什么是json 2.语法格式 3.json的转换工具 （1）概述 （2）常见的json转换工...
python教程之ajax入门
09-07
### Python教程之AJAX入门知识点详解 #### 一、AJAX基础学习 1. **概念理解**： - **AJAX（Asynchronous JavaScript and XML）**：一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 - 主要通过在...
《ajax入门经典》源代码
11-18
**Ajax入门经典源代码概述** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术的核心在于利用JavaScript与服务器进行异步数据交互，结合XML或其他...
AJAx入门教程
qq_38266792的博客
05-31 602
三.Ajax1.原生AJax&lt;body&gt;   &lt;input type="text" id="name" onblur="test()"/&gt;  &lt;/body&gt;&lt;script type="text/javascript"&gt;    var xhr;   //1.创建一个XMLHttpRequest对象     if(win
AJAX入门学习
冯浩月
03-05 253
前言    小编发现这个ajax的内容真的是有点挑战性，因为自己之前在软考的时候接触过一点关于JDK等java环境的配置知识，但总归来说还差那么一点点。所以在经历了ASP.NET、XML、HTML、JavaScript、CSS等内容的学习，自己对于刚刚接触到的AJAX的学习，需要慢慢地消化一下。什么是AJAX 一、含义构成   1.Asynchronous JavaScript And XML（异...
最好的Ajax入门资料
Linvo's blog
02-15 835
慧桥教育的一个PPT，不多，就八十来张；做为Ajax的简单入门，是我见过的最好的资料！对初学者来说，不适宜看那些“圣经”级书籍；也不适宜看一些纯理论的教程。这个课件把必要的基本都讲到了，通过简单的例子，能够使新手很快入门，少走弯路。[点击这里下载]
AJAX基础入门实例教程(含代码)
atg0518的博客
10-02 773
本文转载自：http://www.xujiwei.cn/blog/?id=430 AJAX是这两年蛮热的东西，我也凑凑热闹，前些天去找了些教程学学，下面就按整个处理过程把自己学的东西写写，不过，因为是初学，所以有错误就请见谅啦，也欢迎指正，vipxjw#163.com。 PS.写完了之后看了下，结果再次验证自己写教程真是乱得可以，东说一块西说一块，条理不太清楚的说：）。 1.创...
ajax入门学习（一）
冷血之心的博客
01-31 2288
  （尊重劳动成果，转载请注明出处：http://blog.csdn.net/qq_25827845/article/details/54800237冷血之心的博客）   ajax入门学习（一） ajax入门学习（二）小案例Demo1 ajax入门学习（三）小案例Demo2     1　什么是AJAX AJAX（Asynchronous Javascript And XML）翻译...
初学AJAX必看——基础篇
哎哟喂露露
06-27 3292
首先，AJAX是什么？它的全称是Asynchronous JavaScript and XML   (翻译过来是异步的JavaScript 和 XML )它是一门通信技术，不是语言，这一技术无需刷新页面就可以从服务器取得数据，意思就是不用重新加载整个网页，也能够更新部分网页，用户体验非常好...
AJAX&JQuery基础（适合入门-新手）
ttxxi_的博客
11-12 1319
关于原生AJAX基础我在我自己的上一篇博客进行了简单阐述，需要的话自提https://blog.csdn.net/ttxxi_/article/details/83991752 在申明一下：我只是个大二学生，写的东西很基础，因为我也只是刚刚才接触，所有这个个人觉得也适合和我一样刚刚开始学的人看一下，大佬们喷的时候可以肆无忌惮一点，我觉得我就需要骂一骂hhh 一、AJAX简介 Ajax 即“A...
jQuery 中的 Ajax 详解
zz130428的博客
10-12 923
众所周知，jQuery 是一个跨主流浏览器的 JavaScript 库，它封装了 JavaScript 的常用功能代码，简化了 HTML DOM 操作、事件处理、动画设计和 Ajax 交互等任务。jQuery 中的 Ajax 是对 XMLHttpRequest 或 ActiveXObject（IE9以下版本中）的封装，它提供了一种更加方便和强大的方式来与服务器进行数据交换，从而实现在不重新加载整个页面的情况下，对网页进行局部更新。
Ajax：跨域、防抖和节流、HTTP协议
最新发布
chaosweet的博客
10-18 697
在善意的“双向奔赴”中，每个普通人都如星辰，微小但释放着自己的光芒，交织成灿烂的星河
AJAX入门：新手快车道
"Ajax入门——电子书" Ajax，全称Asynchronous JavaScript and XML，是一种用于创建交互式网页应用的技术，它允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。Ajax的核心在于利用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值