Ajax

最新推荐文章于 2024-05-01 10:23:16 发布

不变嘚code

最新推荐文章于 2024-05-01 10:23:16 发布

阅读量210

点赞数

分类专栏： Jquery 文章标签： ajax

本文链接：https://blog.csdn.net/qq_35927300/article/details/63255436

版权

Jquery 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

##AJAX##
- 是什么?
- AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
- 是一种创建交互式网页应用的网页开发技术

- 能干什么
- 浏览器后台与服务器进行少量的数据交互， AJAX可以使页面实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
- 简单的说传统网页如果需要更新内容，必须重新加载整个页面。而Ａｊａｘ可以做到局部刷新。

- 优势
- AJAX使您可以使用 JavaScript 向服务器提出请求并处理响应，而不阻塞用户。
- AJAX 可使因特网应用程序更小、更快，更友好。

##实现##

1. 创建XMLHttpRequest对象

var xmlhttp = new XMLHttpRequest();

2. 设置回调事件

xmlhttp.onreadystatechange = function(){
// 如果是请求成功则处理此响应
if(xmlhttp.readyState==4 && xmlhttp.status==200){
// 处理内容
alert(xmlhttp.responseText);
}
}

3. 向发服务器发送请求

xmlhttp.open("请求方式", "请求地址", 是否异步);
xmlhttp.send(); // 发送请求

##一个简单的例子##

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function(){
// 如果是请求成功则处理此响应
if(xmlhttp.readyState==4 && xmlhttp.status==200){
// 处理内容
alert(xmlhttp.responseText);
}
}

xmlhttp.open("GET", "你的URL", true);
xmlhttp.send(); // 发送请求

##open 与 send 方法说明##

1. open(method,url,async) 方法
- method：请求的类型；GET 或 POST
- url ：请求地址
- async ：true（异步）或 false（同步）

2. send(string) 方法

- 将请求发送到服务器。
- string 请求参数；仅用于POST请求

异步与同步的区别
1. 异步请求浏览器不会阻塞
2. 同步请求浏览器会阻塞

##请求时带参数##

GET方式

xmlhttp.open("GET","url?参数1=值1&参数2=值2",true);
xmlhttp.send();

POST方式
xmlhttp.open("POST","URL",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 设置请求头为表单请求方式
xmlhttp.send("参数1=值1&参数2=值2");

##获得来自服务器的响应##

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。

##响应状态##

readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status 响应状态码
200 响应成功
404 资源不存在
500 服务器异常

##JQuery 中封装的Ajax方法##

1. jQuery.ajax(url,[settings])

实例：
$.ajax("请求的地址", {
async : true, // 默认: true ，指定是否是异步请求
contentType : 'application/x-www-form-urlencoded', // 一般省略，默认是表单请求方式。现在流行用JSON
data : {name:'小明'}, // 发送到服务器的数据
dataType : 'html'|'JSON', // 预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断
success : function(data, textStatus){}, // 成功的处理函数
type : 'GET' | 'POST' // 请求方式
})

一个请求的例子
$.ajax("/你的URL", {
type: 'POST',
data: {name: '小明'},
success : function(data) {
alert(data);
}
});

a. 更新一个代码片段
查询页面，鼠标停留即可显示用户详情


b. 上面例子用，返回JSON数据格式来实现(常用)(优点是更加灵活)

2. $.load(url, [data], [callback])
是对ajax方法的一个封装，载入远程 HTML 文件代码并插入至 DOM 中。

3. $.get(url, [data], [callback], [type])
这是一个简单的 GET 请求功能以取代复杂 $.ajax

url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。

4. $.post(url, [data], [callback], [type])
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。

url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。

## 练习： ##

1. 一个普通的异步请求（返回一段HTML或一个JSP页面）

jsp中：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="java.util.*,java.text.*"%>
<!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>
<body>
现在时间：
<%
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

out.println(sdf.format(new Date()));
%>
<br>
<button οnclick="ation()">提交</button>
<div>你好</div>
<script type="text/javascript">

function ation(){
//创建xmlHttpRequest
var xmlHttp = new XMLHttpRequest();
//绑定事件
xmlHttp.onreadystatechange = function(){
if(xmlHttp.status == 200 && xmlHttp.readyState == 4){
document.querySelector("div").innerHTML = xmlHttp.responseText;
}
}
//发送请求
/*
method:GET,POST
URL:
ASYNC:是否
*/

//xmlHttp.open("GET","/ajax/test?name=小明&&age=19",true);
xmlHttp.open("POST","/ajax/test",true);
xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
xmlHttp.send("name=小明&&age=19");
}

</script>
</body>
</html>

java中：

String name = req.getParameter("name");
String age = req.getParameter("age");
resp.getWriter().write(name+"你好，年龄："+age);

2.一个返回JSON数据格式的请求

实现AJAX方式的删除与修改功能(在之前做过的处理)

不变嘚code

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax

##AJAX##- 是什么? - AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。- 是一种创建交互式网页应用的网页开发技术- 能干什么- 浏览器后台与服务器进行少量的数据交互， AJAX可以使页面实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。- 简单的说传统
复制链接

扫一扫