原生方式实现Ajax技术
一：什么是Ajax?
Ajax：异步的JavaScript和XML，用于完成网页局部刷新功能（修改少量数据只用局部刷新，不用再整个网页重新加载）；
XML的作用：1.是用于数据传输，但现在都在使用JSON
2.用于存取数据（已经不用），被数据库取代
3.用于写配置文件，现在还在少量使用，逐渐被注解取代
注意：Ajax请求不能写跳转（1.会报错。2.把跳转的页面当作字符串传回去）
二：使用原生的方式实现Ajax
1、创建一个Ajax对象
从Ajax对象xhr创建开始，它的所有操作都被监听
xhr本身是有一个状态的概念，这个状态：readyState
0(为初始化)：对象已经建立，但是尚未初始化（尚未调用open）方法
1(初始化)：对象已建立，尚未调用send方法
2(发送数据)：send方法已经调用，但是当前的状态及http头未知
3(数据发送中)：已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误
4(完成）：数据接收完毕，此时可以通过responseBody和responseText获取完整的回应数据
//内置了一个类：XMLHttpRequest;兼容IE需要创建ActiveXobject //在js中，所有变量定义都使用var var xhr= new XMLHttpRequest();
2、准备请求 .open(methodType（请求类型），methodUrl（请求到后端的地址），isSys（是否异步）)：请求类型：get/post。是否异步：默认为true
注意：如果要传参的话，get请求在路径中传参数，post请求在send中传参
//get请求
xhr.open("get","/地址?传到后台的参数");
//post请求
xhr.open("post","/login");
//如果是post请求，必须设置请求头的类型，后台才能够接收到前台传过去的相应的数据;当然，get请求不需要设置
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
3、准备监听Ajax相应的状态变化：on(监听)，readystate(状态) ，change(匿名方法）
xhr.onreadystatechange = function() {
//xhr.status：请求状态（200表示成功）
//xhr.readyState：获取到响应的值：（当它的状态等于4-->整个请求已经完成，你就可以获取数据了 ）
if(xhr.status==200 && xhr.readyState == 4){
//获取相应的值
var result= xhr.responseText;
//放到相应的位置
document.getElementById("写id").imnnerHTML = result;
}
}
4、发送请求 .sed(varBody)---->varBody：post请求传参要写（key=value&key=value&...);get请求不用写
//get请求
xhr.sed();
//post请求
xhr.send("userName="+userName+"&pwd="+pwd);
get请求前端完整的html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原生Ajax测试</title>
<script type="text/javascript">
function getTime(){
//1.创建ajax对象
var xhr= new XMLHttpRequest();
//2.准备请求（请求类型，后端地址）：此处请求并没有传数据出去，只是发送了一个请求
xhr.open("get","/gettime");
//3.监听ajax的状态变化
xhr.onreadystatechange= funtion(){
if(xhr.status==200 && xhr.readyState==4){
var result = xhr.responseText;
//放到相应的位置
document.getElementById("time").innerHTML = result;
}
}
//4.发送请求
xhr.send();
}
</script>
</head>
<body>
<button onclick="getTime()">得到时间</button><span id="time"></span>
</body>
</html>
get请求后端的java代码:
package ajax.servlet; import java.io.IOException;
import java.util.Date; import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; @WebServlet("/gettime")//前端请求过来的地址
public class GetTimeServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//用于前后台交互数据测试
String date = new Date().toLocaleString();
//通过响应返回相应的数据
resp.getWriter().print(date);
}
}
post请求前端完整的html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function login(){
//1.获取到用户名与密码
var userName = document.getElementById("userName").value;
var pwd = document.getElementById("pwd").value;
//2.创建ajax对象
var xhr= new XMLHttpRequest();
//3.准备请求（请求类型，后台地址）
xhr.open("post","/login");
//如果是post请求，必须设置请求头的类型，后台才能够接收到前台传过去的相应的数据
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//3.监听ajax的状态变化
xhr.onreadystatechange= function(){
if(xhr.status==200 && xhr.readyState==4){
var result = xhr.responseText;
// responseText获取到的都是字符串
if(result == "true"){//登录成功
window.location.href="https://www.baidu.com";
}else{//登录失败
document.getElementById("erSpan").innerHTML="用户名或密码错误！";
}
}
}
//4.发送请求:post请求必须通过.send()传数据到后台
xhr.send("userName="+userName+"&pwd="+pwd);
}
</script>
</head>
<body>
<span id="erSpan"></span>
<form action="/login" method="post">
用户名：<input type="text" name="userName" id="userName" /> <br />
密码<input type="text" name="pwd" id="pwd" /><br />
<input type="button" value="ajax提交" onclick="login()" />
</form>
</body>
</html>
post请求后端的java代码:
package ajax.servlet; import java.io.IOException; import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; @WebServlet("/login")
public class LoginServlet extends HttpServlet{
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//字符集编码，必须写，不然中文会乱码
req.setCharacterEncoding("utf-8");
resp.setContentType("utf-8"); //接收到前台传过来的值
String userName = req.getParameter("userName");
String pwd = req.getParameter("pwd"); //System.out.println(userName+":"+pwd);
//测试
if("流星".equals(userName) && "123".equals(pwd)){
//向前端返回Boolean类型的true,但前端接收到的是String类型
resp.getWriter().print(true);
}else{
resp.getWriter().print(false);
}
}
}
原生方式实现Ajax技术的更多相关文章
- 原生JS的Ajax技术
1.同步和异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待 卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随意做其他事情,不会被卡 ...
- Ajax技术基础
对于AJAX技术,感觉以前虽然用过但是对于AJAX没有一个清晰的认识,今天专门总结一下,希望掌握的更加牢固吧! 一,什么是AJAX? AJAX通常被叫做异步刷新技术,其实他也是可以同步的.主要都用于异 ...
- JS原生Ajax&Jquery的Ajax技术&Json
1.介绍Ajax Ajax = 异步 JavaScript 和 XML Ajax是一种创建快速动态网页的技术 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味着可以不用整个 ...
- 原生及jq方式使用ajax
1.原生js实现Ajax方法: // 封装ajax()方法 function ajax(url,fnSucc,fnFaild){ //1.创建Ajax 对象 if(window.XMLHttpRequ ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 第18天 ajax技术和javascript加强（json）
第18天 ajax技术和javascript加强(json) 复习: B/S架构实现文件上传的思路? 使用a标签实现文件下载功能,有什么问题? 使用Servlet实现文件下载的思路? 今日任务 ...
- AJAX初识(原生JS版AJAX和Jquery版AJAX)
一.什么是JSON 1.介绍 JSON独立于语言,是一种与语言无关的数据格式. JSON指的是JavaScript对象表示法(JavaScript Object Notation) JSON是轻量级的 ...
- Ajax工作原理和原生JS的ajax封装
前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...
- 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法（转载） IEnumerable,ICollection,IList接口问题 不吹不擂，你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理
服务器文档下载zip格式 刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...
随机推荐
- MySQL数据导入sql文件过程中出错
错误类型: ERROR 1231 (42000): Variable 'time_zone' can't be set to the value of 'NULL' ERROR 1231 (42000 ...
- Django ContentType内置组件
一.引出问题 假如有这两张表,它们中的课程可能价格不一样.周期不一样.等等...不一样...,现在有一张价格策略表,怎么就用一张表报保存它们之间不同的数据呢? 可能你会这样: 确实是行!但是,如果有很 ...
- Python函数: any()和all()的用法
版权声明:本文为博主原创文章,未经允许不得转载 引子 平常的文本处理工作中,我经常会遇到这么一种情况:用python判断一个string是否包含一个list里的元素. 这时候使用python的内置函数 ...
- mysql连接错误解决(ERROR 2049 (HY000): Connection using old (pre-4.1.1) authentication protocol ref used (client option 'secure_auth' enabled))
当使用mysql的新版本是,连接老版本的mysql,就会有可能报: ERROR 2049 (HY000): Connection using old (pre-4.1.1) authenticatio ...
- 第十五节：Web爬虫之selenium动态渲染爬取
selenium是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括IE(7, 8, 9, 10, 11),Mozilla Firef ...
- airfoil polar data during post stall stages (high AOA)
airfoil polar data during post stall stages (high AOA) Table of Contents 1. airfoil polar during pos ...
- log 框架 之间的关系
日志框架分为两大部分 一部分是日志框架的抽象层,一部分是日志框架的具体实现 slf4j: 日志框架的抽象层 log4j,logback 日志框架的具体实现 如上图所示: slf4j的具体实现是:slf ...
- linux 简单实用小操作
mysql改密码 通过root以后,(root密码忘记就没法了) alter user username@'%' identified by 'password' 端口被占用 sudo fuser - ...
- 数据库中间件MyCat学习总结（2）——MyCat-Web原理介绍
Mycat是一个分库分表的基于java开发的数据库中间件,使用过程中需要有一个监控系统,mycat-web应运而生.mycat-web是一个使用SpringMVC + Mybatis的监控平台,使用常 ...
- poj 2114 树的分治 可作模板
/* 啊啊啊啊啊啊啊本题证明一个问题,在实际应用中sort比qsort块 还有memset这类初始化能不加尽量别加,很浪费时间 原来的程序把qsort该成sort,去掉一个无用memset就a了时间不 ...