Day10【jQuery进阶】Ajax***

最新推荐文章于 2023-10-17 17:02:03 发布
最新推荐文章于 2023-10-17 17:02:03 发布
阅读量788 收藏
点赞数
文章标签： ajax javascript java js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43639081/article/details/109478443
版权

一、同步请求与异步请求

如果提交表单给服务器，当服务器处理完成之后，响应给浏览器，你发现浏览器显示页面时，闪烁了一下。
这种方式不是异步提交，而是同步提交，闪烁是页面整体刷新了。

1、什么是同步，什么是异步

普通B/S模式（同步）AJAX技术（异步）

  • 同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态。
  • 异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死。
    在这里插入图片描述

2、两种方式有什么不同？

  • 同步请求，服务器响应时，页面整体刷新(响应了整个页面）
  • 异步请求，服务器响应时，页面局部刷新(响应了字符串或者json)

3、异步请求有什么优点？

异步请求可以提高用户的体验性

4、异步请求应用场景有哪些？

  • 用户名检测
  • 搜索的自动补全
  • 页面的局部刷新

二、js原生的Ajax技术（了解）

1、传统的程序运行原理

用户发送请求，服务器接受请求，处理后返回数据，浏览器接受响应数据，进行显示数据，这个时间就会有处理和接受之间的空闲，导致用户的等待时间。

2、Aajx的程序运行原理

页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，在这段时间里，客户端可以任意进行任意操作，可以一直和Ajax进行交流，减少处理时间。直到服务器端将数据返回给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面功能。
在这里插入图片描述

3、js原生的Ajax

其实就是围绕浏览器内内置的Ajax引擎对象进行学习的，要使用js原生的Ajax完成异步操作，有如下几个步骤：
1）创建Ajax引擎对象
2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
3）绑定提交地址
4）发送请求
5）接受响应数据

web\0-base-ajax-index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
    
        function  clickFn() {
            //1）创建Ajax引擎对象
           var xmlHttp = new XMLHttpRequest();
           
           //2)为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
           	//存储函数（或函数名），每当readyState属性改变时，就调用该函数。
            xmlHttp.onreadystatechange = function (ev) {
                /*readyState：存有XMLHttpRequest的状态。从0到4发生变化。
               	 * 0：请求未初始化；
               	 * 1：服务器连接已建立
               	 * 2：请求已接收
               	 * 3：请求处理中
               	 * 4：请求已完成，且相响应已就绪*/
                /*status状态码：
                	200："OK"，说明服务器正常响应
                	404：未找到页面*/
                if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
                   // 5）接受响应数据
                    //获取响应数据
                    alert(xmlHttp.responseText); //response.getWriter().write("hello")
                }
            }
            
            //3）绑定提交地址
            // 参1：表示请求方式
            // 参2：表示服务器的资源访问路径，不用加项目名,
            // 参3：表示是否异步，true是异步
            xmlHttp.open("get","s1",true);
            
            //4)发送请求
            /*注意：如果是post提交
				在发送请求之前设置一个头*/
			//xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xmlHttp.send();
        }

    </script>
</head>
<body>
    <!--设计一个按钮，一点击这个按钮，就向服务器发出异步请求-->
    <input type="button" value="点我，发出异步请求" onclick="clickFn()"/>
</body>
</html>

src\com\wzx\pack01_ajax\BaseAjaxServlet.java

@WebServlet("/s1")
public class BaseAjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //响应给浏览器
        System.out.println("s1 doGet");
        //响应
        response.getWriter().println("hello");
    }
}

总结：所有异步访问都是 ajax 引擎。

三、jQuery的Ajax技术（重点）

1、原生Ajax编程为什么不用？

代码量大，使用不方便，封装成函数，直接调用

2、jQuery框架的ajax函数

jquery是一个优秀的js框架，自然对js原生的ajax进行了封装，封装后的ajax的操 作方法更简洁，功能更强大，与ajax操作相关的jquery方法有如下几种，
在这里插入图片描述
但开发中经常使用的有三种：
在这里插入图片描述

2.1、$.get请求 和 $.post请求 原理

在这里插入图片描述

（1）格式

$.get(url, [data], [callback], [type])
$.post(url, [data], [callback], [type])

  • url：表示服务器的访问路径,如:“s1”。即代表请求的服务器端地址
  • data：表示向服务器发送的参数。即代表请求服务器端的数据（可以是key=value形式也可以是json格式）
    格式1：字符串："username=jack&password=123"
    格式2：json串：{"username":"jack","password":123}
  • callback：匿名函数，使用时其参数随便取名，表示服务器端成功响应 所触发的函数（只有正常成功返回才执行，自动执行）
  • type：表示浏览器期望服务器发送过来的数据类型（jquery会根据指定的类型自动类型转换），常用的返回值类型：“text” “json”
（2）返回值为 “json” 使用该方法 处理 页面返回的数据

在这里插入图片描述

（3）示例
  • 使用 $.get 请求，传给服务器 字符串（不含中文），期望返回 “text”
	<html lang="en">
	<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").on("click",function () {
                //$.get请求
                $.get(
                    "s2",
                    "username=jack&password=123",//字符串，key=value
                    function(data){ //这个data就是服务器返回的数据
                        //处理数据，字符串直接打印即可
                        alert(data)//success
                    },
                    "text"
                );
            })
        })
    </script>
	</head>
	
	<body>
    <!--设计一个按钮，一点击这个按钮，就向服务器发出异步请求-->
    <input id="btn" type="button" value="点我，发出异步请求"/>
	</body>
	</html>

@WebServlet("/s2")
public class Demo02Servlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        //由于是异步请求服务端不能请求转发，或者重定向，因为二者会让页面整体刷新
        System.out.println(username);
        System.out.println(password);
        
        //前台$.get()请求期望返回"text"格式，所以只能返回字符串
        response.getWriter().write("success");
    }
}
  • 使用 $.post 请求，传给服务器 json串（不含中文），期望返回 “json”
     //$.post请求
	 $.post(
	     "s2",
         {"username":"rose","password":123},//json格式
		 function(data){ //这个data就是服务器返回的字符串  var data = []
			//处理数据
			alert(data)//[object Object]
			alert(data.name)//大大
		 },
		 "json"
	 );

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        //由于是异步请求服务端不能请求转发，或者重定向，因为二者会让页面整体刷新
        System.out.println(username);
        System.out.println(password);
        
        //返回的数据中 含中文时，需设置编码格式
        response.setContentType("text/html;charset=utf-8");
        //response.setContentType("text/json;charset=utf-8");
        
        //前台$.post()请求期望返回"json"格式，所以只能返回json串
        //双引号中不能直接用双引号，需转义
        response.getWriter().println("{\"name\":\"大大\",\"age\":18}");
    }
  • 使用 $.get 和 $.post请求，传给服务器 字符串（含中文）

tomcat8中已解决了get方式提交中文乱码问题
所以在服务器就不用重复设置request.setCharacterEncoding(“utf-8”);
如果对get方式进行iso解码后再有utf-8编码：username = new String(username.getBytes(“ISO-8859-1”), “utf-8”);会适得其反，再次乱码。

	var url = "s2";
	var param =  "username=小明&password=123";
    var func = function(data){
    	//处理数据
	};
	var type = "json";
	
	//使用get请求，传入中文会乱码
	//但我用的tomcat8，所以不会乱码
	$.get(url,param,func,type);
	//post本来就不会出现乱码
	$.post(url,param,func,type);

2.2、$.ajax请求方式***

（1）什么是$.ajax请求方式

这种方式是将$.get和$.post方式合成一种请求

（2）如何调用

$.ajax({键：值,键：值,键：值});

（3）$.ajax()中的参数

url：服务器的访问路径
async：默认是true，表示异步请求，false为同步请求
data：向服务器发送的参数
type：默认值 GET ，也可写 POST
contentType:"application/json;charset=UTF-8"：发送信息至服务器时内容编码类型
success：请求成功后的回调函数。
error：请求失败时调用此函数
dataType：预期服务器返回的数据类型

（4） 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>

    <script type="text/javascript">
        function clickFn() {
          $.ajax({
              url:"s2",
              async:true,
              data:"username=bingbing&password=456",
              type:"post",
              dataType:"text",
              success:function (data) {
                  alert(data)
              },
              error:function () {
                    alert("服务器发生了错误")
              }
          });
        }
    </script>
</head>
<body>
    <!--设计一个按钮，一点击这个按钮，就向服务器发出异步请求-->
    <input type="button" value="点我，发出ajax异步请求" onclick="clickFn()"/>
</body>
</html>
  • 以上调用$.ajax的函数代码最好是复制过来，因为方法内的键不能随意修改。

jquery3.0新特性ajax请求

  • 什么是juqery3.0新特性GET/POST请求
$.get({键：值,键：值});
$.post({键：值,键：值});
  • 因为方法指定get与post，所以要比$.ajax少一个键,type:post或者type:get，其他都一样。
  • 企业中一般还是使用1.x

Ajax有哪些优点和缺点

在这里插入图片描述

信仰G
关注
day 55-56 AJAX
gaosong0623的博客
12-02 205
一 ：AJAX预备知识json进阶 1.1 什么是JSON？ JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。JSON是用字符串来表示Javascript对象； 请大家记住一句话：json字符串就是js对象的一种表现形式(字符串的形式) 既然我们已经学过python的json模块，我们就用它来测试下json字符串和json对象到底是什么 ...
前端--阶段笔记（三） jQuery + js进阶
往前看
03-07 1605
jQuery Day 01 js开发框架 ，仓库 特点：链式编程，隐式迭代 支持插件 有丰富第三方插件 1 引入 script src = XX.js <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> 2 测试 控制台输入 jQuery.fn.jquery 引入成功会显示当前引入版本 jQuery 入口函数 等DOM结构渲染完毕即可执行sj 代码 ，不必等所有外部资源加
Python实现http协议，简单的WebServer示例
睿思派克
11-20 1164
1. 服务端Server #!/usr/bin/env python3 # -*- coding: utf-8 -*- # www.etdev.net by respeke   import socket import threading   def tcp_thread(sock,addr): print('accept new connection from %s,%s'%a...
Python 实现http server接收mutipart/form-data文件 方法2
shengzhe8688的专栏
10-17 1229
Pytho 实现httpserver的第二种实现方式，用于接收multipart/form-data文件的接收保存。 解决平时自测、编写服务端上传文件的问题
http接收服务器消息,Python http服务器存储接收到的消息
weixin_39535287的博客
08-07 324
我有以下服务器代码。它创建python http服务器。在现在，它只接收客户端发送的信息，但我希望能够存储客户端发送到服务器的任何内容。在例如，若客户机发送“helloworld”，则“helloworld”将出现在服务器端，但它只显示它。我希望能够将接收到的字符串存储在某个变量中。在比如说。。。。字符串str，那么如果我打印str，那么它会打印“Hello World”。在有人能告诉我怎么做吗？...
Python入门基础：Python 200行代码实现简单的WebServer，还支持图片加载（WSGI，Socket ，TCP，thread）
nosprings的博客
10-17 1183
下载地址:https://download.csdn.net/download/nosprings/12108998 1、代码程序结构如下： static——静态文件目录 templates——html模板文件目录 application.py——TCP连接监听和工作线程处理收发数据 request.py——解析http请求 response.py——封装发送数据模块 runserv...
用Python实现简单的Web Server
Hansel的专栏
05-02 1万+
Refer: https://www.afternerd.com/blog/python-http-server/ Web Server的概念 用Python实现Web Server Python 2中SimpleHTTPServer模块被合并到Python 3的http.server模块。它支持目录浏览，指定端口，指定绑定地址等。 方法一：直接在命令行调用http.server模...
Day08
03-16
7. **AJAX**：Asynchronous JavaScript and XML，虽然现在XML使用较少，但AJAX的概念仍然重要。它是实现页面无刷新更新数据的技术，通过XMLHttpRequest对象实现。 8. **ES6新特性**：ECMAScript 6（ES6）引入了许多...
ajax从入门到精通资料
01-05
本资料包是针对初学者和进阶者设计的，旨在帮助你全面掌握Ajax技术。 首先，我们从"学习素材 视频源码"的标签可以看出，这个资料包不仅包含理论学习材料，还提供了实际的代码示例。这将使学习过程更加生动和实用，...
Day11
03-19
在JavaScript的世界里，"Day11"可能是指学习或探讨的第11天的主题，而没有具体的上下文信息，我们只能假设这是关于JavaScript的一个进阶话题。JavaScript是一种广泛用于网页和网络应用的脚本语言，它允许动态内容、...
PythonWebServer
04-07
摆脱又大又重的.net framework。使用Python编写免安装运行时、以Windows后台服务形式运行的WEB服务器
小巧的web服务器 PyWebServer v1.0 (只有一个exe文件)
05-02
版本V1.0 非常小巧的一个单exe文件web服务器，大小约为6MB，端口号为8081，直接把当前目录指定为web根目录，支持目录浏览，自定义端口/IP/根目录，文件访问。 适合测试，查看html帮助文档。附上了python源代码，方便修改并用‘pyinstaller -F -c pyWebServer.py’打包成单个exe文件。 参考我的博客：https://blog.csdn.net/hansel/article/details/89762715
用python写的简单的http文件服务器demo
weixin_43903378的博客
02-05 519
import socket import os import re import time from multiprocessing import Process class CHttpServer(object): """Httpserver服务端类""" def __init__(self): self.m_serverSocket = socket.socket(socket.AF_INET,socket.SOCK_STREAM) self.m_ser
python接收http请求_python的BaseHTTPServer模块接收post请求
weixin_39846186的博客
12-10 245
#!/usr/bin/python #encoding=utf-8 ''' 基于BaseHTTPServer的http server实现，包括get，post方法，get参数接收，post参数接收。 ''' from BaseHTTPServer import BaseHTTPRequestHandler, HTTPServer import io,shutil import url...
用python的socket写一个简单的server，用户监听某一端口，接受来自外部设备推送的数据
weixin_43254287的博客
06-24 2117
用python的socket写一个简单的server，用户监听某一端口，接受来自外部设备推送的数据。 import socket import sys import time def detect(): try: s = socket.socket(socket.AF_INET,socket.SOCK_STREAM) s.setsockpot(socket.SQL_SOCKET, socket.SO_REUSEADDR,1) s.bind(('0.0.0.0',8088))
python的BaseHTTPServer模块接收post请求
热门推荐
gujing001的专栏
11-13 2万+
#!/usr/bin/python #encoding=utf-8 ''' 基于BaseHTTPServer的http server实现，包括get，post方法，get参数接收，post参数接收。 ''' from BaseHTTPServer import BaseHTTPRequestHandler, HTTPServer import io,shutil import urllib i
python做服务器接口-用Python实现简单的服务器【新手必学】
weixin_39674190的博客
11-11 2832
如何实现服务器。。。socket接口是实际上是操作系统提供的系统调用。socket的使用并不局限于Python语言，你可以用C或者JAVA来写出同样的socket服务器，而所有语言使用socket的方式都类似(Apache就是使用C实现的服务器)Web框架就是提前写好了服务器。不能跨语言的使用框架。框架的好处在于帮你处理了一些细节，从而实现快速开发，但同时受到Python本身性能的限制。我们已经看...
python3.6中使用web.py创建简单webservice并使用pyinstaller打包成可执行程序
leiweip的博客
06-04 1783
python3.6中使用web.py创建简单webservice并使用pyinstaller打包成可执行程序 1.windows 环境搭建 python版本3.6 安装：下载地址，安装过程中选择完全安装，并且勾选“将python添加到path中”。 安装web.py：因为我使用pip 安装web.py时，报好多依赖相关的错，所以建议：使用easy_install web.py命...
Python入门自学进阶-Web框架——1、认识WEB服务器及框架
kaoa000的专栏——非淡泊无以明志，非宁静无以致远
03-23 4102
框架，即framework，是解决一个开放性问题而设计的具有一定约束性的支撑结构。 DRP原则：Don't RePeat yourself。 Django
* 10 * * * ?
最新发布
12-22
这是一个Cron表达式，用于在每小时的第10分钟执行任务。具体解释如下： - `*`：代表任意字符，表示该字段可以是任意值。 - `10`：代表具体的值，表示该字段必须是10。 - `*`：代表任意字符，表示该字段可以是任意值...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值