海阔天空

手机扫码查看

2020javaweb教程之Ajax

概述

AJAX 是一种在无需重新加载整个网页的情况下，能够实现局部更新的技术。

什么是ajax？

AJAX = 异步 JavaScript 和 XML。 (Asynchronized JavaScript And XML)

AJAX 是一种用于快速创建动态网页的技术。

AJAX工作原理

ajax是基于现有的Internet标准，并且联合使用它们：

1.XMLHttpRequest对象(异步的服务器交换数据)
2.JavaScript/DOM(信息显示/交互)
3.CSS(给数据定义样式)
4.XML (作为转换数据的格式)、JSON

ajax实例

1.创建XMLHttpRequest对象
2.设置onreadystatechange回调函数
3.open()打开链接
4.send()发送请求

function changes(){
    //1.创建 XMLHttpRequest 对象
    var xhr=new XMLHttpRequest();
    //2.设置onreadystatechange回调函数
    xhr.onreadystatechange=function () {
        //服务器状态             响应结果
        if(xhr.readyState==4&&xhr.status==200){
            //动态修改页面的局部内容
            document.getElementById("div1").innerHTML=xhr.responseText;
        }
    }
    //3.打开连接  请求方式  请求地址    异步/同步
    xhr.open("GET","test.html",true);
    //4.发送请求
    xhr.send();
}

创建XMLHttpRequest对象

IE7+以及其他主流浏览器创建语法：
var xhr=new XMLHttpRequest();

老版本IE5，IE6创建语法
var xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP“);

判断浏览器是否支持：
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}

onreadystatechange回调函数

属性：onreadystatechange
描述：存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

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

属性：status
描述：200: “OK”404: 未找到页面

xhr.onreadystatechange=function () {
    //服务器状态             响应结果
    if(xhr.readyState==4&&xhr.status==200){
        //动态修改页面的局部内容
        document.getElementById("div1").innerHTML=xhr.responseText;
    }
}

XMLHttpRequest请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法

xhr.open("GET","test.html");
xhr.send();

方法：open(method,url,async)
描述：规定请求的类型、URL 以及是否异步处理请求。
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

方法：send(String)
描述：将请求发送到服务器。string：仅用于 POST 请求

请求方式

GET请求：
xhr.open(“GET”,”test.html”,true);
xhr.send();

POST请求：
xmlhttp.open(“POST”,”/try/ajax/servlet4″,true);
xmlhttp.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);
xmlhttp.send(“username=leilei&password=123”);

方法：setRequestHeader(header,value)
描述：向请求添加 HTTP 头。
header: 规定头的名称
value: 规定头的值

ajax与json

服务器传给浏览器

 

浏览器传给服务器