Ajax学习笔记

一.什么是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内容

 


    
    


姓名：马小欢
年龄：21
学历：大学本科

ming.html内容

 


    
    


姓名：小明
年龄：22
学历：大学本科

yun.html内容

 


    
    


姓名：赵云
年龄：25
学历：研究生

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" %>


    
    
    
    


学生信息：

    
马小欢
    
赵云
    
小明

结果：

点击小明名称

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" %>


    
    
    
    


学生信息：

    
马小欢
    
赵云
    
小明

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" %>


    
    
    
    


学生信息：

    
马小欢
    
赵云
    
小明

 

文章文集：JavaEE--学习笔记