Ajax学习笔记

来源：互联网发布：什么软件可以锁一体机编辑：程序博客网时间：2024/06/07 18:46

一.什么是Ajax?

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术.不通过刷新页面既可以与服务器进行通信。

1.XMLHttpRequest

1)open(“method”,”url”) 建立对服务器的调用
2)send(content)向服务器发送请求
3)onreadystatechange 每个状态改变都会触发这一事件，通常调用一个函数
4)readyState请求状态：0-未初始化，1-正在加载，2-已经加载，3-交互中，4-完成
5)responseTest：服务器响应
6)status:服务器的Http状态码

实例练习：

实现点击姓名链接显示链接到的文本内容到原页面，不跳转页面。

huan.html内容

 <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>姓名：马小欢年龄：21学历：大学本科</body></html>

ming.html内容

 <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>姓名：小明年龄：22学历：大学本科</body></html>

yun.html内容

 <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>姓名：赵云年龄：25学历：研究生</body></html>

1.用原生方法实现：index_1.jsp代码：

<%--  Created by IntelliJ IDEA.  User: pc  Date: 17-4-21  Time: 下午12:10  To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>    <script type='text/javascript' src='./js/jquery.min.js' charset='utf-8'></script>    <title>Title</title>    <script type="text/javascript">        $(function () {            $("a").click(function () {                var request = new XMLHttpRequest();                var method = "GET";                var url = this.href;                request.open(method, url);                request.send(null);                request.onreadystatechange = function () {                    if (request.readyState === 4) {                        if (request.status === 200 || request.status === 304) {                            $(".html_").html("");                            $(".html_").append(request.responseText);                        }                    }                }                return false;            });        });    </script>    <title>Title</title></head><body><h1>学生信息：</h1><ul>    <li><a href="./html_a/huan.html">马小欢</a></li>    <li><a href="./html_a/yun.html">赵云</a></li>    <li><a href="./html_a/ming.html">小明</a></li></ul><h1 class="html_"></h1></body></html>

结果：

点击小明名称

2.load方法：

load(url,[data],[callback]) 将远程的HTML插入到DOM中
url:请求页面的url地址
data:发送到key/value数据
callback:请求完成时的回调函数

2.load方法实现：index_1.jsp代码：

<%--  Created by IntelliJ IDEA.  User: pc  Date: 17-4-21  Time: 下午12:10  To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>    <script type='text/javascript' src='./js/jquery.min.js' charset='utf-8'></script>    <title>Title</title>    <script type="text/javascript">        $(function () {            $("a").click(function () {              var url = this.href;                var time ={"time":new Date()}              $(".html_").load(url,time);                return false;            });        });    </script>    <title>Title</title></head><body><h1>学生信息：</h1><ul>    <li><a href="./html_a/huan.html">马小欢</a></li>    <li><a href="./html_a/yun.html">赵云</a></li>    <li><a href="./html_a/ming.html">小明</a></li></ul><h1 class="html_"></h1></body></html>

2..get.post方法：

2.get方法 .post方法实现：index_1.jsp代码：

<%--  Created by IntelliJ IDEA.  User: pc  Date: 17-4-21  Time: 下午12:10  To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>    <script type='text/javascript' src='./js/jquery.min.js' charset='utf-8'></script>    <title>Title</title>    <script type="text/javascript">        $(function () {            $("a").click(function () {                var url = this.href;                var time = {"time": new Date()}                $.post(url, time, function (data) {                    var name = $(data).find("name").text();                    var age = $(data).find("age").text();                    var email = $(data).find("email").text();                    $(".html_").html("");                    $(".html_").append("<h2>姓名：" + name + "性别：" + age + "邮箱：" + email);                });                return false;            });        });    </script>    <title>Title</title></head><body><h1>学生信息：</h1><ul>    <li><a href="./xml_ajax/huan.xml">马小欢</a></li>    <li><a href="./xml_ajax/yun.xml">赵云</a></li>    <li><a href="./xml_ajax/ming.xml">小明</a></li></ul><h1 class="html_"> </h1></body></html>

文章文集：JavaEE–学习笔记

0 0

Ajax学习笔记

一.什么是Ajax?

1.XMLHttpRequest

实例练习：

1.用原生方法实现：index_1.jsp代码：

2.load方法：

2.load方法实现：index_1.jsp代码：

2..get.post方法：

2.get方法 .post方法 实现：index_1.jsp代码：

文章文集：JavaEE–学习笔记

2.get方法 .post方法实现：index_1.jsp代码：