学习Ajax——入门篇02

来源：互联网发布：查看淘宝店铺销售额编辑：程序博客网时间：2024/05/22 03:45

Ajax用原生的Javascript编写的话，并不容易，但是Jquery很好地封装了Ajax，相比较原生的js，jquery的ajax更为简单，编写容易。下面就来认识下JQuery下的ajax。

一、JQuery中AJax load()方法

JQuery load()方法的作用是：从服务器加载数据，并返回数据放入到相应被selector绑定的的元素中。
其格式为：

$(selector).load(URL,data,callback);

参数说明

URL：要请求的数据的URL，可以将JQuery选择器添加到URL参数中
将test.txt中id=”p”的元素内容放入到id=”div”的
div元素中：

$("#div").load("test.txt #p");

data：是请求时一同发送的数据，类似于原生js中ajax中xmlhttp.send(data)，是键值对的形式出现。
callback：回调函数，就是load完之后执行的函数。（在父函数中作为参数的另一个子函数，当父函数执行完，子函数再执行。这个子函数就是回调函数），其实就是原生js中的onclick=funciton(){...}，回调函数的参数有：
responseTxt：回调成功，从服务器端取回到的数据，跟原生中javascript中的一样。
statusTxt：调用的状态显示，类似于onreadystatechange方法显示状态。
xhr：ajax最核心的XMLHttpRequest 对象

function(responseTxt,statusTxt,xhr)

具体的实例

test.txt：

Welcome Jian！It's is JQuery ajax!version 1.0

html部分：

<body><div id="div"><h2>利用JQuery中的AJax获取test.txt的内容</h2></div><button>获得外部内容</button></body>

jquery ajax部分（jquery需要加入jquery.js库文件）：

<script src="jquery/jquery-3.2.1.js"></script><script>$(document).ready(function(){  $("button").click(function(){    $("#div").load("test.txt",function(responseTxt,statusTxt,xhr){      if(statusTxt=="success")        alert("外部内容加载成功！");      if(statusTxt=="error")        alert("Error: "+xhr.status+": "+xhr.statusText);    });  });});</script>

结果：
这里写图片描述

二、JQuery Ajax中的get/post方法

1、get方法
一般都是用来向服务器请求资源数据，get方法需要注意的细节有一下几点：

get方法可能会取到缓存。
具体的介绍我在day01中记录了
get方法请求有长度的限制
get方法请求的参数是在URL中发送的,并且以键值对的形式存在。
get方法在发送敏感信息（比如用户密码等）时，不推荐使用。因为会缓存保存，/xxx/xxx/xxx.php?username=Jian&password=123;
其语法：

$.get(URL,callback);

简单的实例：
test_get.txt部分:

Welcome Jian！It's a get method of ajax !version 1.0

html部分:

<body><div id="div"><h2>利用AJax get方法获取test_get.txt的内容</h2></div><button>get</button></body>

jquery部分:

<script>$(document).ready(function(){  $("button").click(function(){    $.get("test_get.txt",function(data,status){        $("#div").html("数据：" + data + "<br/>"+"状态：" + status);//将data放入div中    });  });});</script>

结果为：
这里写图片描述

2、post方法
post方法一般用于向向指定的资源提交要处理的数据。与get方法不同，post方法多了data参数，此外也有以下几点细节：

post方法不会被缓存。
post方法请求有长度的限制
post在数据量大，且敏感时推荐使用。
其语法为：

$.post(URL,data,callback,type)

简单实例：
test_post.jsp部分：使用jstl标签获取并输出

<%@ 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"><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><title>ajax_post</title></head><%  //获取post上来的json数据     String username = request.getParameter("name");    String password = request.getParameter("pass");    //setAttribute存入数据    pageContext.setAttribute("username", username);    pageContext.setAttribute("password", password);%><body><div>Welcome <c:out value="${username}"/><br/>你的帐号为：<c:out value="${username}"/><br/>你的密码为：<c:out value="${password}"/></div></body></html>

html部分：

<div id="div"><h2>利用AJax post方法提交数据并更新获取test_post.jsp的内容</h2></div><button>post</button>

jquery部分：

<script src="jquery/jquery-3.2.1.js"></script><script>$(document).ready(function(){  $("button").click(function(){    $.post("test_post.jsp",    //data    {      name:"Lijian",      pass:"123"    },    //callback    function(data,status){      $("#div").html(data);    });  });});</script>

结果：
这里写图片描述

阅读全文

0 0