一：什么是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技术的更多相关文章

  1. 原生JS的Ajax技术

    1.同步和异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待  卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随意做其他事情,不会被卡 ...

  2. Ajax技术基础

    对于AJAX技术,感觉以前虽然用过但是对于AJAX没有一个清晰的认识,今天专门总结一下,希望掌握的更加牢固吧! 一,什么是AJAX? AJAX通常被叫做异步刷新技术,其实他也是可以同步的.主要都用于异 ...

  3. JS原生Ajax&Jquery的Ajax技术&Json

    1.介绍Ajax Ajax = 异步 JavaScript 和 XML Ajax是一种创建快速动态网页的技术 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味着可以不用整个 ...

  4. 原生及jq方式使用ajax

    1.原生js实现Ajax方法: // 封装ajax()方法 function ajax(url,fnSucc,fnFaild){ //1.创建Ajax 对象 if(window.XMLHttpRequ ...

  5. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  6. 第18天 ajax技术和javascript加强（json）

    第18天    ajax技术和javascript加强(json) 复习: B/S架构实现文件上传的思路? 使用a标签实现文件下载功能,有什么问题? 使用Servlet实现文件下载的思路? 今日任务 ...

  7. AJAX初识(原生JS版AJAX和Jquery版AJAX)

    一.什么是JSON 1.介绍 JSON独立于语言,是一种与语言无关的数据格式. JSON指的是JavaScript对象表示法(JavaScript Object Notation) JSON是轻量级的 ...

  8. Ajax工作原理和原生JS的ajax封装

    前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...

  9. 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法（转载） IEnumerable,ICollection,IList接口问题 不吹不擂，你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理

    服务器文档下载zip格式   刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...

随机推荐

  1. BZOJ 1565 Luogu P2805 [NOI2009]植物大战僵尸 (Tarjan判环、最小割)

    我: "立个flag 14点之前调完这题" 洛谷AC时间: 2019-06-24 14:00:16 实力打脸... 网络流板子从来写不对系列 题目链接: (BZOJ) https: ...

  2. 【codeforces 709B】Checkpoints

    [题目链接]:http://codeforces.com/contest/709/problem/B [题意] 让你从起点开始走过n-1个点(至少n-1个) 问你最少走多远; [题解] 肯定不多走啊; ...

  3. excel 2003 默认保存后出现超级连接解决方法

    在excel 2003 中当选中某个单元格然后拷贝出来后发现总是出现超级连接,每次都要取消下很是麻烦 . 于是经过研究找到解决方法,真是累的我够呛 ,先将方法介绍给大家. 工具---自动更正选项--- ...

  4. 常州模拟赛d7t1 亲戚

    分析:把题目换个方式理解,就是把各个点排成一列,并且指定了若干对的先后次序,问你有多少种序列满足要求. 显然是一道dp题,直接推出方程似乎有点点困难,那么先看看数据特点. 1.有一些点满足fi=0,那 ...

  5. 【页面传值6种方式】- 【JSP 页面传值方法总结：4种】 - 【跨页面传值的几种简单方式3种】

    阅读目录 1. URL 链接后追加参数 2. Form 3. 设置 Cookie 4. 设置 Session JSP 页面间传递参数是项目中经常需要的,这应该算是 web 基本功吧. 试着将各种方式总 ...

  6. N的倍数

    题目来源: Ural 1302 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 一个长度为N的数组A,从A中选出若干个数,使得这些数的和是N的倍数. 例如:N = ...

  7. 【BZOJ4199&UOJ131】品酒大会（后缀数组，并查集）

    题意: 两杯“r相似” (r>1)的酒同时也是“1 相似”.“2 相似”.…….“(r−1) 相似”的. n<=300000 abs(a[i])<=10^9 思路:对于i,j两个后缀 ...

  8. 试来试去，WIN下最简单的WIN API开发工具，Pelles C就好啦

    昨晚试过N个,不是太大,就是不容易和WIN API集成. 今早一试就灵了个.... Pelles C. Pelles C是一款windows下的C IDE,支持调试,且为免费.它有一个高效率的链接器, ...

  9. [codevs 1961]躲避大龙（dfs)

    题目:http://dev.codevs.cn/problem/1961/ 分析: 被“SPFA”的标签骗了…… 看了hzwer的博客才知道可以用f[i][0..60]表示每个点每个秒是否可以到.至于 ...

  10. [bzoj1563][NOI2009]诗人小G（决策单调性优化）

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1563 分析: 首先可得朴素的方程:f[i]=min{f[j]+|s[j]-j-s[i] ...