重点+超详细：ajax和json及案例

不用jQuery的ajax流程

<!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>Insert title here</title>

</head>

<script>

/*

 * 1.大致的流程

 *    * 创建核心对象

 *    * 绑定一个函数

 *    * 打开和服务端连接

 *    * 发送数据

 *    * 处理函数   成本的付出

 * 2.核心对象的5种状态分别代表的含义

 */

function GetXmlHttpObject()

{

  var xmlHttp=null;

  try

    {

    // Firefox, Opera 8.0+, Safari

    xmlHttp=new XMLHttpRequest();

    }

  catch (e)

    {

    // Internet Explorer

    try

      {

      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

      }

    catch (e)

      {

      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

      }

    }

  return xmlHttp;

}

function fn(){

    //1.创建对象

    var xmlHttpRequest=GetXmlHttpObject();

    //2.绑定函数

    xmlHttpRequest.onreadystatechange=fm;

    //3.打开

    xmlHttpRequest.open("get","test.jsp",true);

    //4.发送

    xmlHttpRequest.send();

    //5.处理绑定函数

    function fm(){

        if (xmlHttpRequest.readyState==4)

        {

          if (xmlHttpRequest.status==200)

          {

            document.getElementById('dv').innerHTML=xmlHttpRequest.responseText;

          }

          else

          {

            alert("Problem retrieving data:" + xmlHttpRequest.statusText);

           }

        }

    }

}

</script>

<body>

<button onclick="fn()">按钮</button>

<div id="dv"></div>

</body>

</html>

test.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

<%

    out.println("AAAAAA");

%>

基于jQuery的ajax

xml格式的数据

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <!--   引入jQuery -->

<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>

<script language="javascript" >

$(function(){

    $("#send").click(function(){
　　　　　　//获取id是username和content的值，回调函数dt的值是返回的数据

        $.post("demo2.jsp",{"username":$("#username").val(),"content":$("#content").val()},function(dt){

            //alert(dt);

            //保证第一行的XML数据没有空行

            var um=$(dt).find("comments comment").attr("username");

            var con=$(dt).find("comments content").text();

            $("#resText").html(um+" "+con);

        },"xml");

    });

});

</script>

</head>

<body>

<form id="form1">

<p>评论:</p>

 <p>姓名: <input type="text" name="username" id="username" /></p>

 <p>内容: <textarea name="content" id="content" ></textarea></p>

 <p><input type="button" id="send" value="提交"/></p>

</form>

<div  class='comment'>已有评论：</div>

<div id="resText" >

</div>

</body>

</html>

demo2.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%

//注意空行问题

  String username = request.getParameter("username");

  String content = request.getParameter("content");

  response.setContentType("text/xml");

  out.println("<?xml version='1.0' encoding='UTF-8'?>");

  out.println("<comments>");

  out.println("<comment username='"+username+"'>");

  out.println("<content>"+content+"</content>");

  out.println("</comment>");

  out.println("</comments>");

%>

json格式的数据

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <!--   引入jQuery -->

<script src="../../jquery-1.4.2.js" type="text/javascript"></script>

<script language="javascript" >

$(function(){

    $("#send").click(function(){

        //$.post("demo3.jsp",{"username":$("#username").val(),"content":$("#content").val()},function(dt){

          // 将JSON格式的字符串转换为JS对象

          // var dd=eval("("+dt+")")

          // alert(dd.username);

           //alert(dd.content);

        //});

        $.post("demo3.jsp",{"username":$("#username").val(),"content":$("#content").val()},function(dt){

           alert(dt);

           $("#resText").html(dt.username+" "+dt.content);

        },"json");

    });

});    

</script>

</head>

<body>

<form id="form1">

<p>评论:</p>

 <p>姓名: <input type="text" name="username" id="username" /></p>

 <p>内容: <textarea name="content" id="content" ></textarea></p>

 <p><input type="button" id="send" value="提交"/></p>

</form>

<div id="resText" >

</div>

</body>

</html>

demo3.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%

  String username = request.getParameter("username");

  String content = request.getParameter("content");

  System.out.print("{\"username\":\""+username+"\",\"content\":\""+content+"\"}");

  out.print("{\"username\":\""+username+"\",\"content\":\""+content+"\"}");

%>

这是我之前项目中总用到的类型，重点：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <!--   引入jQuery -->

<script src="../../jquery-1.4.2.js" type="text/javascript"></script>

<script language="javascript" >

    $(function(){

        /*

         * $.ajax({url:'',data:{},type:'',dataType:'json',success:function(dt){},error:function(){}});

         */

        $("#send").click(function(){

            //$.ajax(); ==> $.ajax({});  ===>$.ajax({k1:v1,k2:v2,k3:v3.....});

            $.ajax({

                //请求的路径

                url:'demo.jsp',

                //发送到服务端的数据

                data:{username:$("#username").val(),content:$("#content").val()},

                //请求的类型

                type:'post',

                //响应回的数据 格式

                dataType:'json',

                //成功之后处理的函数

                success:function(dt){

                    //alert(dt);

                    $("#resText").html(dt.username+" "+dt.content);

                },

                //失败之后处理的函数

                error:function(){

                    alert("Fail");

                }

            });

        });

    })

</script>

</head>

<body>

<form id="form1">

<p>评论:</p>

 <p>姓名: <input type="text" name="username" id="username" /></p>

 <p>内容: <textarea name="content" id="content" ></textarea></p>

 <p><input type="button" id="send" value="提交"/></p>

</form>

<div  class='comment'>已有评论：</div>

<div id="resText" >

</div>

</body>

</html>

demo.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%

  String username = request.getParameter("username");

  String content = request.getParameter("content");

  out.print("{\"username\":\""+username+"\",\"content\":\""+content+"\"}");

%>

重点+超详细：ajax和json及案例的更多相关文章

ajax请求json数据案例
今天有这样一个需求,点击六个大洲,出现对应的一些请求信息,展示在下面,请求请求过后,第二次点击就无需请求.如图所示:点击北美洲下面出现请求的一些数据 html代码结构: <div class=& ...
jQuery实例之ajax请求json数据案例
今天有这样一个需求,点击六个大洲,出现对应的一些请求信息,展示在下面,请求请求过后,第二次点击就无需请求.如图所示:点击北美洲下面出现请求的一些数据 html代码结构: <div class=& ...
ajax接受json响应（讲义）
l 什么是json? l Json和xml比较 l Ajax如何使用JSON l Ajax接收json响应案例什么是json? JSON (JavaScript Object Notation) 是 ...
ajax接收json
l 什么是json? l Json和xml比较 l Ajax如何使用JSON l Ajax接收json响应案例什么是json? JSON (JavaScript Object Notation) 是 ...
Ajax接收json响应
json?  Json和xml比较  Ajax如何使用JSON  Ajax接收json响应案例什么是json?JSON (JavaScript Object Notation) 是一种轻量级的 ...
GoJS超详细入门（插件使用无非：引包、初始化、配参数（json）、引数据（json）四步）
GoJS超详细入门(插件使用无非:引包.初始化.配参数(json).引数据(json)四步) 一.总结一句话总结:插件使用无非:引包.初始化.配参数(json).引数据(json)四步. 1.goj ...
python 全栈开发，Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)
昨日内容回顾基于对象的跨表查询正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询反向查询:关联属性在A表中,所以B对象找A对象,反向查询一对多: 按字段:xx book ----- ...
Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件
一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...
Django-choices字段值对应关系（性别）-MTV与MVC科普-Ajax发json格式与文件格式数据-contentType格式-Ajax搭配sweetalert实现删除确认弹窗-自定义分页器-批量插入-07
目录 models 字段补充 choices 参数/字段(用的很多) MTV与MVC模型科普 Ajax 发送 GET.POST 请求的几种常见方式用 Ajax 做一个小案例准备工作动手用 Aj ...

随机推荐

gulp教程之gulp-rev-append
简介: 使用gulp-rev-append给页面的引用添加版本号,清除页面引用缓存. 1.安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件 ...
JavaScript(一)——简介（简单介绍）
1.JavaScript是个什么东西? 它是个脚本语言,需要有宿主文件,它的宿主文件是HTML文件. 2.它与Java什么关系? 没有什么直接的联系,Java是Sun公司(已被Oracle收购了),J ...
利用docker搭建rtmp服务器(1)
以后的项目里面可能需要用到直播,所以就先看看本来想在自己MAC上搭建nginx的,后来怕把自己的机子搞乱,刚好就学习了下docker,感觉docker强大就在于是一个操作系统软件的版本管理系统,可以 ...
NPOI高效匯出Excel
using System.Collections.Generic; using System.Data; using System.IO; using System.Linq; using NPOI. ...
Unity3D 3D横版跑酷跳跃
Unity3d 跑酷动画的控制首先给个图吧, 我们跑酷里面需要动画的,今天说一下动画的知识! 1.导入骨骼动画模型文件之后,如果使用之前版本的unity的播放动画的方式,需要设置AnimationT ...
Ext中 grid 设置行样式
//设置样式 JS var SetRowClass = function(record, rowIndex, rowParams, store) { if (record.data.status ...
html5 drag 文件拖拽浅淡
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
STL&lowbar;string&period;vector中find到的iterator的序号
ZC:注意,printf("0x%08X\n",vtr.end()); 打印出来应该就是 0x00000000,∵ 它就是指向最后一个元素的后面,应该是理解成无意义 ...
fiddler抓包时显示Tunnel to&period;&period;&period;&period;&period;&period;443是怎么回事
之前公司的app使用的http协议,因此不需要安装证书也能够转包. 后来改成https协议后,在使用fiddler进行抓包时,一直出现tunnel to 443. 百度了好久也没有具体的解决办法,后来 ...
taro 更新
更新 Taro 提供了更新命令来更新 CLI 工具自身和项目中 Taro 相关的依赖更新 Taro CLI 工具 # taro $ taro update self # npm npm i -g @ ...