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内容

 


    
    Title


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


ming.html内容

 


    
    Title


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


yun.html内容

 


    
    Title


姓名:赵云
年龄: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" %>


    
    Title
    
    Title


学生信息:

结果:

Ajax学习笔记_第1张图片
Ajax学习笔记_第2张图片
点击小明名称

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


    
    Title
    
    Title


学生信息:

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


    
    Title
    
    Title


学生信息:

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

你可能感兴趣的:(Ajax学习笔记)