1.原生的Ajax入门 (感觉很是繁琐,所以一般我们都是用简单的方式)

  • 创建一个核心对象 XMLHttpRequest

             var xmlhttp;
    
         if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    
             xmlhttp = new XMLHttpRequest();
    
         } else {// code for IE6, IE5
    
             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    
         }
  • 编写一个回调函数 
    xmlhttp.onreadystatechange = function() {
    
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    
                //xmlhttp.responseText;
    
                //这里可以对返回的数据进行处理
    
            }
    
        }
  • 编写请求方式和请求的路径(open操作) 
    xmlhttp.open("GET", "${pageContext.request.contextPath}/ajax1", true);
  • 发送请求(send操作) 
    xmlhttp.send();
  • 入门案例演示
    • 前端页面

       <%@ 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>AJAX</title>
      
 </head>
      
 <body>
      
     <button onclick="yuansheng()">点我一下</button>
      
 </body>
      
 <script type="text/javascript">
      
     function yuansheng() {
      
         var xmlhttp;
      
         if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
      
             xmlhttp = new XMLHttpRequest();
      
         } else {// code for IE6, IE5
      
             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      
         }
      
         xmlhttp.onreadystatechange = function() {
      
             if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      
                 //xmlhttp.responseText;
      
                 alert(xmlhttp.responseText);
      
             }
      
         }
      
         xmlhttp.open("GET", "${pageContext.request.contextPath}/ajax1", true);
      
         xmlhttp.send();

     }
      
 </script>
      
 </html>
    • Servlet页面 
       package ajax;

 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("/ajax1")
      
 public class YuanshengAjax extends HttpServlet {
      
     private static final long serialVersionUID = 1L;

     protected void doGet(HttpServletRequest request, HttpServletResponse response)
      
             throws ServletException, IOException {
      
         System.out.println("点我了一下");
      
         response.getWriter().print("hello");
      
     }

     protected void doPost(HttpServletRequest request, HttpServletResponse response)
      
             throws ServletException, IOException {
      
         doGet(request, response);
      
     }

 }

2.Jquery发送Ajax (记得导入jquery.js)

  • 方式一:jquery对象.load(url,params,function(数据){});

    $("#feeds").load("feeds.html");
  • ★★★方式二:$.get(url,params,function(数据){},type); 
         function jqget() {
    
        $.get("${pageContext.request.contextPath}/jsget", {
    
            "hello" : "hellovalue"
    
        }, function(data) {
    
            alert(data);
    
        },type="json");

    }
  • ★★★方式三:$.post(url,params,function(数据){},type); 
        function jqpost(){
    
        $.post("${pageContext.request.contextPath}/jspost", {
    
            "hello" : "hellovalue"
    
        }, function(data) {
    
            alert(data);
    
        },type="json");
    
    }
  • 方式四:$.ajax([选项]); 
    $.ajax({ url: "test.html", context: document.body, success: function(){
    
    $(this).addClass("done");
    
}});

    　　

3.Jquery发送Ajax如何发送数据

  • $.get(url,params,function(数据){},type);

    • params:请求的参数 参数为key\value的形式 key=value  {"":"","":""}
  • $.post(url,params,function(数据){},type);
    • params:请求的参数 参数为key\value的形式 key=value  {"":"","":""}

4.Jquery发送的Ajax如何接受数据

  • 在使用Ajax发送Ajax的时候我们可以在我们可以通过指定type的值来设置返回数据的格式　　

    • type:返回内容格式，xml, html, script, json, text, _default。    我们经常在开发中使用"json"
  • 如果后台返回的数据为json格式我们如何获取呢? 
        function jqget() {
    
        $.get("${pageContext.request.contextPath}/jsget", {
    
            "hello" : "hellovalue"
    
        }, function(data) {
    
            var j = eval(json);
    
            alert(j.username)
    
        },type="json");

    }

后端程序员如何玩转AJAX的更多相关文章

  1. 后端程序员必备的 Linux 基础知识

    1. 从认识操作系统开始 正式开始 Linux 之前,简单花一点点篇幅科普一下操作系统相关的内容. 1.1. 操作系统简介 我通过以下四点介绍什么是操作系统: 操作系统(Operating Syste ...

  2. 写给后端程序员的HTTP缓存原理介绍

    There are only two hard things in Computer Science: cache invalidation and naming things. -- Phil Ka ...

  3. 科普，想成为厉害的 Java 后端程序员，你需要懂这 13 个知识点

    老读者就请肆无忌惮地点赞吧,微信搜索[沉默王二]关注这个在九朝古都洛阳苟且偷生的程序员.本文 GitHub github.com/itwanger 已收录,里面还有我精心为你准备的一线大厂面试题. 站 ...

  4. 科普，想成为厉害的 Java 后端程序员，你需要懂这些

    站在运筹帷幄的角度来看,一名厉害的 Java 后端程序员都需要懂得哪些知识呢?我想,这也是很多读者迫切想知道的一个问题,因为如果不站在一个宏观的角度的话,所有学过的知识点都是零散的,就感觉像一只迷路的 ...

  5. Angular学习资料大全和常用语法汇总（让后端程序员轻松上手）

    前言: 首先为什么要写这样的一篇文章呢?主要是因为前段时间写过一些关于Angualr的相关实战文章,有些爱学习的小伙伴对这方面比较感兴趣,但是又不知道该怎么入手(因为认识我的大多数小伙伴都是后端的同学 ...

  6. 后端程序员实现一个IP归属地的小程序

    在日常开发中,后端主要提供数据以及处理业务逻辑,前端主要提供页面布局以及数据展示.后端程序员对于页面布局接触比较少,但是小程序有完善的文档说明.页面布局也相对简单,实现起来相对简单一些.而且小程序相对 ...

  7. Java后端程序员都做些什么？

    这个问题来自于QQ网友,一句两句说不清楚,索性写个文章. 我刚开始做Web开发的时候,根本没有前端,后端之说. 原因很简单,那个时候服务器端的代码就是一切:接受浏览器的请求,实现业务逻辑,访问数据库, ...

  8. 后端程序员必备的 Linux 基础知识+常见命令（近万字总结）

    大家好!我是 Guide 哥,Java 后端开发.一个会一点前端,喜欢烹饪的自由少年. 今天这篇文章中简单介绍一下一个 Java 程序员必知的 Linux 的一些概念以及常见命令. 如果文章有任何需要 ...

  9. java后端程序员1年工作经验总结

    java后端1年经验和技术总结(1) 1.引言 毕业已经一年有余,这一年里特别感谢技术管理人员的器重,以及同事的帮忙,学到了不少东西.这一年里走过一些弯路,也碰到一些难题,也受到过做为一名开发却经常为 ...

随机推荐

  1. sql server服务看不到，显示为远程过程调用在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误10061

    需要启动sql server服务 启动就可以完成登录了

  2. Linux两块4TB的数据磁盘创建8TB的Raid0

    分区表MBR与GPT的说明: MBR:主引导记录,是传统的分区机制,应用于绝大多数使用BIOS的PC设备,MBR+BIOS,MBR支持32位和64位系统,支持的分区数量有限,MBR只支持不超过2T的硬 ...

  3. django 常用命令 详解

    check     compilemessages     createcachetable     dbshell     diffsettings     dumpdata     flush   ...

  4. 从JavaScript 数组去重看兼容性有关问题，及性能优化（摘自玉伯博客）

    JavaScript 数组去重经常出现在前端招聘的笔试题里,比如: 有数组 var arr = ['a', 'b', 'c', '1', 0, 'c', 1, '', 1, 0],请用 JavaScr ...

  5. 又是一年WWDC，暨回想去年之旅——Part III

    前言 无论这篇写到哪里,就以这篇作为结尾,结束这个流水回想系列文了. Computer History Museum 计算机历史博物馆(站点)是在Google旁边,參观Google之前的行程. 记得那 ...

  6. 算法5-6：Kd树

    问题 给定一系列的点.和一个矩形.求矩形中包括的点的数量. 解答 这个问题能够通过建立矩阵来进行求解.首先将一个空间切割成矩阵,将点放置在相应的格子中.再计算矩形覆盖的格子.再推断格子中的点是否包括在 ...

  7. Spring Boot与Spring Security整合后post数据不了，403拒绝访问

    http://blog.csdn.net/sinat_28454173/article/details/52251004 *************************************** ...

  8. js 内存泄漏

    在javascript中,我们很少去关注内存的管理.我们创建变量,使用变量,浏览器关注这些底层的细节都显得很正常. 但是当应用程序变得越来越复杂并且ajax化之后,或者用户在一个页面停留过久,我们可能 ...

  9. ParagraphFormat 对象【精品】

    ParagraphFormat 对象 贡献者:motolola   日期:2009-05-27  阅读:5261  回复: 相关标签:wps  >  API  >  paragraphfo ...

  10. C语言 · 数对

    算法训练 数对   时间限制:1.0s   内存限制:512.0MB      问题描述 编写一个程序,该程序从用户读入一个整数,然后列出所有的数对,每个数对的乘积即为该数. 输入格式:输入只有一行, ...