Ajax 前端/后端数据交互

一概述

同步: 一请求一响应,全局刷新
异步: 多请求多响应,局部刷新 (默认为异步,效率高)
场景: 浏览网页时,未全局刷新,能更新数据的页面基本都使用了Ajax技术

二 Ajax数据交互

2.1 案例一获取后台Date

演示:

流程:依据浏览器获取其Ajax核心对象—>请求准备—>设置监听函数–>发送请求—>请求码==4 &&响应码200—>获取date

code

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>date</title><script type="text/javascript">function getAjax(){try{ //主流浏览器的Ajax核心对象return new XMLHttpRequest();}catch(e){//低版本ie浏览器的Ajax核心对象return new ActiveXObject('Microsoft.XMLHTTP');}}function getDate() {//获取Ajax核心对象: 兼容ie6以下的浏览器var xhr = getAjax();alert("当前浏览器的Ajax核心对象: "+xhr);//准备发送请求工作:  get--->请求方式  /date---url   true--->异步_默认不写是异步xhr.open("get","/xx/date",true);//监听函数: xhr.onreadystatechange= function(){//请求状态为4  && 响应状态码为200 -->获取响应数据if(xhr.readyState == 4 && xhr.status == 200) {alert("服务器响应的数据: "+xhr.responseText);}}//发送请求xhr.send();}</script></head><body><!-- 需求: 点击button 发送ajax get请求获取后台数据 --><input type="button" οnclick="getDate()" value="获取当前时间"></body>
</html>

@Controller
public class AjaxController {@ResponseBody  //必加@RequestMapping("/date")public String date() {return new Date().toLocaleString(); //获取当前时间的字符串}
}

2.2 案例二验证登录

演示:

需求简述: document.获取用户填入标签值,使用Ajax异步发送请求至服务器进行数据验证,true 成功跳转页面,false给出提示

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>login</title><script type="text/javascript">function getAjax(){   //兼容低版本ietry{return new XMLHttpRequest();}catch(e){return new ActiveXObject('Microsoft.XMLHTTP');}}function login(){     //设置监听alert("ing...");//获取Ajax核心对象var xhr = getAjax();//请求准备xhr.open("POST","/xx/login",true);//监听函数xhr.onreadystatechange = function() {if(xhr.readyState==4 && xhr.status==200) {//获取后台响应的数据var result = xhr.responseText;alert(result);//true 登录成功跳转页面  false  失败if(result === "true") {window.location.href = "/xx/welcome.jsp";}else {alert("密码或用户名有误~");}}}//使用document 通过id获取inputvar username = document.getElementById("username").value;var password = document.getElementById("password").value;//准备ajax传递的参数var param = "username="+username+"&password="+password;//POST请求必须设置请求头信息xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");//发送请求: get请求不能传参,post请求传参必须设置请求头 xhr.send(param);}</script></head><body><form>username:<input type="text" id="username" name="username">password:<input type="text" id="password" name="password"><input type="button" οnclick="login()" value="登录">  <--绑定事件--></form></body>
</html>

Ajax 前端后端数据交互相关推荐

【Demo】idea搭建SpringBoot和AJAX前后端数据交互
此文章详细介绍了idea 搭建springboot步骤,以及简易的前后端通过ajax进行简单数据交互代码,二话不说,进入正题. 第一步.idea开发工具搭建springboot框架来看下整个项目结构 ...
Ajax 前后端数据交互
ajax 数据交互今天又是奋斗的一天,行吧,来学习ajax ajax 数据交互什么是ajax? ajax的`优势` ajax的使用创建一个ajax对象配置这个对象发送请求接受返回过来的数据 ...
ajax连接前后端原理,前后端数据交互方法和原理
前后端数据交互方法和原理发布时间:2018-10-28 11:25, 浏览次数:742 对于想要搞web的新手而言,会用html+css+javascript实现一个页面没什么太大的困难,但是想要前 ...
前后端数据交互——ajax技术
在实际开发过程中,前端页面通常需要根据后台数据实现动态生成和实时更新,因此如何实现前后端数据交互成了开发过程中的难题. 现将使用ajax技术解决前后端数据的交互: (1)ajax技术介绍: ajax一 ...
前后端数据交互——ajax（原生及jquery）
目录前后端数据交互--ajax 1. 介绍 2.原生ajax用法 3.jquery的ajax 4.ajax原理说明前后端数据交互--ajax 1. 介绍 1.1 定义 Ajax(Asynchron ...
ajax实现前后端数据交互
ajax实现前后端数据交互 1.在做项目的时候,或多或少都会用到ajax来实现前后端数据的交互,接下来我们就看一个简单的实例吧. 实例效果: 点击按钮,发送异步请求,请求后端的数据,显示在网页上. 接 ...
java后端与前端的交互_前端和后端数据交互的基本知识和常见方式
一.首先了解前端,后端,数据三者的关系. 1.前端常常是是html,css,js三者的构成的页面的总称.运行在客户端.以浏览器为例. 2.后端常常是后端语言.比如php,java等写的一些脚本.来操作 ...
前端和后端数据交互的基本知识
一.首先了解前端.后端.数据三者的关系 1) 前端通常是html,css,js三者构成的页面的总称.运行在客户端.以浏览器为例. 2) 后端是指后端程序.比如java,php等编写的一些服务.用来操作 ...
python的前端和后端_python前端和后端数据交互，tornado框架入门，初学小试牛刀！...
Python前端和后端是如何交互的,怎么用tornado框架快速搭建前端和后端数据交互? 前端与后端的数据交互,最常用的就是GET.POST,比较常用的用法是:提交表单数据到后端,后端返回json 前 ...

Ajax 前端后端数据交互

Ajax 前端/后端数据交互

一概述

二 Ajax数据交互

2.1 案例一获取后台Date

code

2.2 案例二验证登录

Ajax 前端后端数据交互相关推荐

最新文章

热门文章

Ajax 前端后端数据交互

Ajax 前端/后端数据交互

一 概述

二 Ajax数据交互

2.1 案例一 获取后台Date

code

2.2 案例二 验证登录

Ajax 前端后端数据交互相关推荐

最新文章

热门文章

一概述

2.1 案例一获取后台Date

2.2 案例二验证登录