javaweb-ajax

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
它由下列技术组合而成。
1.使用CSS和XHTML来表示。
2.使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。
AJAX 的核心是 XMLHttpRequest 对象。
Ajax的工作原理
Ajax的工作原理相当于在用户和服务器之间加了—个中间层(A JAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

XMLHttpRequest常用属性

1.onreadystatechange 属性
onreadystatechange 属性存有处理服务器响应的函数。下面的代码定义一个空的函数，可同时对onreadystatechange 属性进行设置

xmlHttp.onreadystatechange = function() { //代码}

readyState 属性
readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。
readyState 属性可能的值：

onreadystatechange 函数添加一条 If 语句，来测试响应是否已完成(意味着可获得数据)：

xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
//从服务器的response获得数据
}
}

responseText 属性
通过 responseText 属性来取回由服务器返回的数据。

xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {document.myForm.time.value = xmlHttp.responseText;}
}

XMLHttpRequest方法

open() 方法
open() 有三个参数。第一个参数定义发送请求所使用的方法，第二个参数规定服务器端脚本的URL，第三个参数规定应当对请求进行异步地处理。

xmlHttp.open("GET","test.php",true);

2.send() 方法
send() 方法将请求送往服务器。如果我们假设 HTML 文件和 PHP 文件位于相同的目录，那么代码是这样的：

xmlHttp.send(null);

Ajax编程步骤

创建XMLHttpRequest对象。
设置请求方式。
调用回调函数。
发送请求

1.创建XMLHttpRequest对象

var xmlHttp=new XMLHttpRequest();
//IE5或者IE6浏览器，则使用ActiveX对象
var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

手写A JAX的时候，首先要判断该浏览器是否支持XMLHttpRequest对象，如果支持则创建该对象，如果不支持则创建ActiveX对象。

//第一步：创建XMLHttpRequest对象
var xmlHttp;
if (window.XMLHttpRequest) {
//非IE
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
//IE
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
}

2 设置请求方式
WEB开发中，请求有两种形式，一个是get，一个是post,XMLHttpRequest对象的open()方法就是来设置请求方式的

var url = "http://localhost:8080/JsLearning3/getAjax";
xmlHttp.open("POST", url, true);

open() 方法的 async 参数必须设置为 true

回调函数
XMLHttpRequest对象有一个onreadystatechange属性，这个属性返回的是一个匿名的方法，所以回调函数就在
这里写xmlHttp.onreadystatechange=function{},function{}内部就是回调函数的内容。所谓回调函数，就是请求在后台处理完，再返回到前台所实现的功能

xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var obj = document.getElementById(id);
obj.innerHTML = xmlHttp.responseText;
} else {
alert("AJAX服务器返回错误！");
}
}
}

xmlHttp.readyState是存有XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化。1:服务器连接已建立。2: 请求已接收。3: 请求处理中。4: 请求已完成，且响应已就绪。所以这里我们判断只有当xmlHttp.readyState为4的时候才可以继续执行。
xmlHttp.status是服务器返回的结果，其中200代表正确。404代表未找到页面
xmlHttp对象有两个属性都可以获取后台返回的数据，分别是：responseText和responseXML，其中
responseText是用来获得字符串形式的响应数据，
responseXML是用来获得 XML 形式的响应数据

AJAX状态值是指，运行AJAX所经历过的几种状态，无论访问是否成功都将响应的步骤，可以理解成为AJAX运行步骤
AJAX状态码是指，无论AJAX访问是否成功，由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码，该信息使用“ajax.status”所获得
AJAX状态码说明 1：请求收到，继续处理 2：操作成功收到，分析、接受 3：完成此请求必须进一步处理 4：请求包含一个错误语法或不能完成 5：服务器执行一个完全有效请求失败

发送请求

//第四步：设置发送请求的内容和发送报送。然后发送请求
var uname= document.getElementsByName("userName")[0].value;
var upass= document.getElementsByName("userPass")[0].value ;
var params = "userName=" + uname+ "&userPass=" +upass+ "&time=" + Math.random();
// 增加time随机参数，防止读取缓存
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");
// 向请求添加 HTTP 头，POST如果有数据一定加加！！！！
xmlHttp.send(params);

实例:

index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html><head><title>$Title$</title><script type="text/javascript">function test1() {//1.创建XMLHttpRequest对象var xmlHttp;if (window.XMLHttpRequest) {//非IExmlHttp = new XMLHttpRequest();} else if (window.ActiveXObject) {//IExmlHttp = new ActiveXObject("Microsoft.XMLHTTP")}//2.打开连接var username=document.getElementById("username").value;//   xmlHttp.open("get","/testuname?uname="+username,true);xmlHttp.open("post","/testuname",true);//3.指定回调函数xmlHttp.onreadystatechange=function(){//3.1 判断状态if(xmlHttp.readyState==4){//3.2 接受返回的内容var text = xmlHttp.responseText;document.getElementById("rs").innerText=text;}}//4.发送//  xmlHttp.send(null);xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");xmlHttp.send("uname="+username)}</script></head><body><h1>注册</h1>用户名:<input type="text" id="username" name="uname"onblur="test1()"><span id="rs"></span></body>
</html>处理Servlet:
TestServlet.java
package com.yhp.web;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(value = "/testuname")
public class TestServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//1.接受参数String uname = req.getParameter("uname");resp.setContentType("text/html;charset=utf-8");PrintWriter writer = resp.getWriter();//2.验证，注意:ajax请求处理完毕后，返回数据时使用PrintWriter输出流，且ajax默认返回原页面if("admin".equals(uname)){//用户名已存在writer.print("用户名已存在");}else{//用户名可用writer.print("用户名可用");}}
}

JQuery的ajax

ajax()方法
可以通过发送 HTTP请求加载远程数据，是 jQuery 最底层的 Ajax 实现，具有较高灵活性

$.ajax({url:请求地址type:"get | post | put | delete " 默认是get,data:请求参数 {"id":"123","pwd":"123456"},dataType:请求数据类型"html | text | json | xml | script | jsonp ",success:function(data,dataTextStatus,jqxhr){ },//请求成功时error:function(jqxhr,textStatus,error)//请求失败时
})get() 方法通过远程 HTTP GET 请求载入信息
$.get(url,data,function(result) {//省略将服务器返回的数据显示到页面的代码//url:请求的路径//data:发送的数据//success:成功函数//datatype 返回的数据
});post() 方法通过远程 HTTP POST 请求载入信息。
$.post(url,data,function(result) {//省略将服务器返回的数据显示到页面的代码//url:请求的路径//data:发送的数据//success:成功函数//datatype 返回的数据
});

实例:
.jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html><head><title>$Title$</title><script type="text/javascript" src="js/jquery-1.8.0.min.js"></script><script type="text/javascript">$(function(){$("#username").blur(function(){//1.接受参数var uname=$(this).val();//2.使用ajax发送请求$.ajax({url:"/testuname",data:"uname="+uname,type:"get",dataType:"text",success:function (result) {//通过参数来接受服务器返回的内容$("#rs").html(result);}});$.post("/testuname","uname="+uname,function (result) {$("#rs").html(result);});$.get("/testuname","uname="+uname,function (result) {$("#rs").html(result);});});})</script></head><body><h1>注册</h1>用户名:<input type="text" id="username" name="uname"><span id="rs"></span></body>
</html>

数据处理页面就是上面的TestServlet.java

JSON
JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式JSON的定义
var 变量名 = {
“key” : value , // Number类型
“key2” : “value” , // 字符串类型
“key3” : [] , // 数组类型
“key4” : {}, // json 对象类型
“key5” : [{},{}] // json 数组
};

可以使用变量名.key值的方式访问json变量,
java与json之间的转换时用fastjson和gjson进行;

基础概念：
Serialization:序列化，使Java对象到Json字符串的过程。
Deserialization：反序列化，字符串转换成Java对象

Gson的两个基础方法

toJson();
fromJson();Gson的创建方式一：直接new Gson对象
// 使用new方法
Gson gson = new Gson();// toJson 将bean对象转换为json字符串
String jsonStr = gson.toJson(user, User.class);// fromJson 将json字符串转为bean对象
Student user= gson.fromJson(jsonStr, User.class);// **序列化List**
String jsonStr2 = gson.toJson(list);// **反序列化成List时需要使用到TypeToken getType()**
List<User> retList = gson.fromJson(jsonStr2,new TypeToken<List<User>>(){}.getType());

Gson的创建方式二：使用GsonBuilder
使用new Gson()，此时会创建一个带有默认配置选项的Gson实例，如果不想使用默认配置，那么就可以使用GsonBuilder

//serializeNulls()是GsonBuilder提供的一种配置，当字段值为空或null时，依然对该字段进行转换
Gson gson = new GsonBuilder().serializeNulls().create(); 使用GsonBuilder创建Gson实例的步骤：
首先创建GsonBuilder,然后调用GsonBuilder提供的各种配置方法进行配置，
最后调用GsonBuilder的create方法，将基于当前的配置创建一个Gson实例。
Gson gson = new GsonBuilder().excludeFieldsWithoutExposeAnnotation() //不对没有用@Expose注解的属性进行操作.enableComplexMapKeySerialization() //当Map的key为复杂对象时,需要开启该方法.serializeNulls() //当字段值为空或null时，依然对该字段进行转换.setDateFormat("yyyy-MM-dd HH:mm:ss:SSS") //时间转化为特定格式.setPrettyPrinting() //对结果进行格式化，增加换行.disableHtmlEscaping() //防止特殊字符出现乱码.registerTypeAdapter(User.class,new UserAdapter()) //为某特定对象设置固定的序列或反序列方式，自定义Adapter需实现JsonSerializer或者JsonDeserializer接口.create();

Gosn对复杂Map的处理时需要用到其中的

enableComplexMapKeySerialization() 配置：
Gson gson = new GsonBuilder().enableComplexMapKeySerialization().create(); //开启复杂处理Map方法
Map<List<User>, String> map = new HashMap<List<User>, String>();
// TODO 向map中添加数据
String jsonStr = gson.toJson(map);  //toJson
Map<List<User>, String> resultMap = gson.fromJson(jsonStr,new TypeToken<Map<List<User>, String>>() {}.getType()); //fromJson如果Map的key为String，则可以不使用GsonBuilder的enableComplexMapKeySerialization()方法，或者直接new Gson();

Gson的注解：

@Expose注解
public class User {@Exposeprivate String firstName;@Expose(serialize = false)private String lastName;@Expose(deserialize = false)private String emailAddress;private String password;
}

@Expose中serialize和deserialize属性是可选的，默认两个都为true。
如果serialize为true，调用toJson时会序列化该属性，
如果deserialize为true，调用fromJson生成Java对象时不会进行反序列化。
注意：如果采用new Gson()方式创建Gson，@Expose没有任何效果。需要使用 gsonBuilder.excludeFieldsWithoutExposeAnnotation()方法。

Fast使用;

常用API:

public static final Object parse(String text); 
// 把JSON文本parse为JSONObject或者JSONArraypublic static final JSONObject parseObject(String text)； 
// 把JSON文本parse成JSONObject public static final <T> T parseObject(String text, Class<T> clazz); 
// 把JSON文本parse为JavaBean public static final JSONArray parseArray(String text); 
// 把JSON文本parse成JSONArray public static final <T> List<T> parseArray(String text, Class<T> clazz);//把JSON文本parse成JavaBean集合 public static final String toJSONString(Object object); 
// 将JavaBean序列化为JSON文本 public static final String toJSONString(Object object, boolean prettyFormat); 
// 将JavaBean序列化为带格式的JSON文本 public static final Object toJSON(Object javaObject); 
//将JavaBean转换为JSONObject或者JSONArray。

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

Python做出来的数据可视化真香！
最新可视化分析前程无忧招聘网1、数据预处理2、进行数据清洗3、数据可视化（pyecharts）1、数据预处理将存储在mysql 中的数据进行数据预处理在jupyter notebook中进行调试导出至excel 获得初步的数据结果2、进行数据清洗部分代码展示# 构造想要分析的目标岗位,做一个数据筛选 …...
2024/4/22 7:24:16
SNMP与Netconf
截至2020年3月，中国网民规模为9.04亿，较2018年底增长7508万，互联网普及率达64.5%；手机网民规模达8.97亿，网民使用手机上网的比例达99.3%。可以说，人们的生活越来越依赖网络，尤其是受疫情影响，很多线下业务也转型网络运营，网络服务的质量直接影响着企业业务的稳定。网…...
2024/4/15 1:15:00
时间和字符串之间的util
有关时间类型package com.mgj.hardware.platform.api.util;import org.apache.commons.lang3.StringUtils;import java.sql.Timestamp; import java.text.DateFormat; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Calendar; import…...
2024/5/6 20:49:46
算法题：地宫取宝（Java实现）
一、问题描述X 国王有一个地宫宝库。是 n x m 个格子的矩阵。每个格子放一件宝贝。每个宝贝贴着价值标签。地宫的入口在左上角，出口在右下角。小明被带到地宫的入口，国王要求他只能向右或向下行走。走过某个格子时，如果那个格子中的宝贝价值比小明手中任意宝贝价值都大，小明…...
2024/4/15 7:22:27
算法案例分析—字符串模式匹配算法
目录一、朴素的模式匹配算法二、KMP算法（改进的模式匹配算法）hello！大家好哇，我是灰小猿，一个超会写bug的沙雕程序猿！今天来和大家分享一个关于字符串比较的模式匹配算法，在数据结构中对字符串的相关操作中，对子串的定位操作通常称为串的模式匹配，同样他也是各种串处理…...
2024/5/6 20:23:10
StorefrontModule和B2CStorefrontModule的区别
文件目录：@Spartacus-storefront:把这个B2cStorefrontModule改成StorefrontModule，因为后者不会提供一些default配置，所以运行时会有很多关于default Implementation的警告信息：页面也无法正常渲染：对比正常的B2cStorefrontModule.withConfig环境下的console打印：要获取更…...
2024/5/6 20:26:05
纯手工打造Tomcat
纯手工打造Tomcat一、java中网络编程：TCP/UDP实现二、文件解析器的使用三、不得不提的Http协议四、开始手写service五、多线程下的server 一、java中网络编程：TCP/UDP实现UDP： UDP网络编程：是基于字节的方式来接受/发送数据//客户端 public class Client {public static v…...
2024/4/9 12:32:18
include““和incude＜＞区别
include< file >编译程序会先到标准函数库中找文件 include”file” 编译程序会先从当前目录中找文件参考原文转：在C程序中包含文件有以下两种方法： (1)用符号“<”和“>”将要包含的文件的文件名括起来。这种方法指示预处理程序到预定义的缺省路径下寻找文件…...
2024/4/23 11:19:31
阿里P8大神：这4道面试题我一定会问，答好3题P6稳，全部OK考虑P7
裁员阴影下的互联网圈目前一片哀鸿遍野，所以居安思危、有备无患总是没错的。若考虑跳槽，首推阿里。面试相对简单（面经多），Java需求量大，放张截图随便感受下：在job.alibaba搜索Java，最后一页职位也足够新鲜阿里牛逼！Java YES！（破音）各位兄弟简历投起来（or 找我内推…...
2024/4/9 14:41:08
孟加拉国将推出其首个区块链汇款服务系统
渣打银行在孟加拉国推出首个汇款服务。新闻南亚国家孟加拉国很快将推出其首个区块链汇款系统，该系统将允许在马来西亚的孟加拉侨民立即将工资汇款转移到本国。据英国《商业标准》报道，英国国家银行服务公司渣打银行今天宣布为孟加拉国提供基于区块链的跨境汇款服务。渣打银行…...
2024/4/27 23:55:56
记录阿里云服务器和百度网盘之间传输文件
背景描述：课题搭建一块板子的linux系统环境，帮助安装相关的软件等解决方案：买了一个阿里云服务器，先试着搭个pc环境，试下仿真的效果如何问题描述：下载提供的软件包需要（1）在百度网盘上（2）githup上解决方案：针对（2）可以直接使用git clone；或者使用wget 但是…...
2024/5/5 22:17:55
给python不同版本安装第三方库
通过cmd命令行直接进入安装目录下的Scripts, 说明以我的为例，我首先安装了anacoda，自带的python3.7的版本，而我有个程序得用版本2，然后重新安装了一个。下载安装包的时候，我想只是放在这个python2的版本下（或者说anaconda虽然自带了很多包，但是我在python2 的环境下调用…...
2024/5/1 3:58:26
计算机网络——计算机网络病毒和黑客
计算机网络病毒的分类（1）系统病毒的前缀为：Win32、PE、Win95、W32、W95等。这些病毒的一般共有的特性是可以感染windows操作系统的 *.exe 和 *.dll 文件，并通过这些文件进行传播。（2）蠕虫病毒的前缀是：Worm。自包含程序，它能传播自身功能的拷贝或自身的某些部分到其他…...
2024/5/1 0:25:49
刷LeetCode的一些心得（0基础大龄转码上谷歌）
我之前就是完全0基础、大龄转码，刷题上千然后进谷歌的…… 这里0基础指的是没学过编程语言，没学过数据结构和算法，一上来就直接做题那种。第一道题two sum，我显然不会做。我的笨方法就是看答案，背答案，然后默出来，就这样还是错了很多次。然而就是这样低的起点，我把LC…...
2024/4/21 21:12:36
HDMI的高级理解
HDMI的芯片如果独立来区分的话，分为transmitter和receiver。典型的EP901就是一款集成HDCP ENGINE，数字音频解码器的HDMI接收器，它的HDCP将被HDMI的使用端读取并验证通讯，它自己处于SLAVE端。以上是EP901的内部图表，内部集成HDCP Engine，负责跟使用端的HDMI发送端通讯。当…...
2024/4/22 15:04:03
NoSQL之Redis群集
文章目录发展背景Redis集群介绍Redis集群的优势Redis集群的实现方法Redis-Cluster数据分片Redis群集的数据分片支持热添加添加或者删除节点Redis-Cluster的主从复制模型Redis群集配置示例案例环境案例配置安装Redis主Redis配置安装ruby添加节点从Redis配置发展背景单节点Redi…...
2024/4/27 21:03:43
ElasticSearch 笔记
文章目录一、引言1.1 海量数据1.2 全文检索1.3 高亮显示二、ES概述2.1 ES的介绍2.2 ES的由来2.3 ES和Solr2.4 倒排索引三、 ElasticSearch安装3.1 安装ES&Kibana3.2 安装IK分词器四、 ElasticSearch基本操作4.1 ES的结构4.1.1 索引Index，分片和备份4.1.2 类型 Type4.1.3 文…...
2024/4/25 3:02:01
学习笔记--------Linux系统部署redis
1.下载安装包首先在官网上下载好Redis在linux系统下的安装包：https://redis.io/download 2.导入Linux系统内/安装/部署进入到Xshell控制台(默认当前是root根目录)，输入wget 将上面复制的下载链接粘贴上，如下命令: 如果自己的机器可以访问外网可以按照上述方法复制链接，然后…...
2024/5/2 3:56:32
中智集；隶属度函数
中智集1，中智集的由来先看一个例子引入。对于每个x∈U，μA(x)或简记为A(x)叫做元素x对模糊集A隶属度。模糊集：隶属度函数比如，一个人25岁，隶属于年轻这个模糊集的程度为0.7直觉模糊集：隶属度函数 + 非隶属度函数比如，一个人25岁，隶属于年轻这个模糊集的程度度为0.7…...
2024/5/6 0:55:04
Linux基础Day01
操作系统概述目标：了解操作系统的作用 1.1 操作系统(Operation System, OS) 操作系统作为接口的示意图: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O5GZDju8-1599652430460)(E:\大数据课程(讲义+视频+代码)]\博客积累\1558233351754.png) 没…...
2024/4/22 21:31:42

javaweb-ajax

相关文章

最新文章