JavaWeb_27-AJAX

Posted 2021-04-15 TheSkyCloud

AJAX的请求

含义:

ajax是一种浏览器通过javascript异步发出请求,局部更新页面的技术

异步JavaScript和xml

a.html

<script type="text/javascript">

// 发起Ajax请求，访问服务器AjaxServlet中javaScriptAjax

function ajaxRequest() {

// 1 创建XMLHttpRequest 

var xmlhttprequest = new XMLHttpRequest();

// 2 调用open方法设置请求参数

xmlhttprequest.open("GET","http://localhost:8080/book/ajaxServlet?action=javaScriptAjax",true);

4 在send方法前绑定事件，处理请求完成后的操作

xmlhttprequest.onreadystatechange = function(){

if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {

// 把响应的数据显示在页面上

document.getElementById("div").innerHTML = xmlhttprequest.responseText;

}

//3 调用send方法发送请求

xmlhttprequest.send();

}

服务端:

AjaxServlet类

Gson gson = new Gson();

//转换为json的字符串格式

String personJson = gson.tojson(person);

resp.getWrite().write(personJson);

JQuery中的AJAX

$.ajax方法

url

type

data

success

datatype

jqueryAjax.html

<script type="text/javascript">$(function(){// ajax请求$("#ajaxBtn").click(function(){$.ajax({url:"http://localhost:8080/book/ajaxServlet",// data:"action=jQueryAjax",data:{action:"jQueryAjax"},type:"GET",success:function (data) {("#msg").html(" ajax 编号：" + data.id + " , 姓名：" + data.name);},dataType : "json"});});</script>

$.get $.post方法

url

data

calllback 成功的回调函数

type

$.getJSON方法

url

data

callback

表单序列化:serialize