Ajax基础

最新推荐文章于 2022-01-21 20:41:47 发布

小松萘

最新推荐文章于 2022-01-21 20:41:47 发布

阅读量99

点赞数

分类专栏： Web开发

本文链接：https://blog.csdn.net/weixin_44116061/article/details/112384262

版权

Web开发专栏收录该内容

22 篇文章 0 订阅

订阅专栏

借鉴于这里

简介

Asynchronous JavaScript and XML——异步JavaScript和XML

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

包含的技术

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

l XMLHttpRequest 对象 (异步的与服务器交换数据)

l JavaScript/DOM (信息显示/交互)

l CSS (给数据定义样式)

l XML (作为转换数据的格式)

工作原理

简述

通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

详述

Ajax的工作原理相当于在用户和服务器之间加了一个中间层(ajax引擎),使用户操作与服务器响应异步化。

局部更新

异步请求

浏览器普通交互方式：

浏览器的Ajax的交互方式：

XHR(XMLHttpRequest)

XMLHttpRequest 对象用于在后台与服务器交换数据。

l 在不重新加载页面的情况下更新网页

l 在页面已加载后从服务器请求/接收数据

l 在后台向服务器发送数据

l 所有现代的浏览器都支持 XMLHttpRequest 对象。

XML

EXtensible Markup Language，可扩展标记语言，用来传输和存储数据。它提供了用于描述结构化数据的格式，适用于不同应用程序间的数据交换，而且这种交换不以预先定义的一组数据结构为前提，增强了可扩展性。

XMLHttpRequest对象与服务器交换的数据通常采用XML格式。

<?xml version="1.0" encoding="UTF-8"?>
<note>
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>

XML并没有做任何事情。只是包装在标签中的信息。旨在承载数据
XML不使用预定义标签

属性

onreadystatechange
一个JavaScript函数对象，当readyState属性改变时会调用它。回调函数会在user interface线程中调用。
readyState
表示请求/响应过程的当前活动阶段

0：未初始化。尚未调用open()

1：启动。已经调用open()，尚未调用send()

2：发送。已经调用send()，尚未接收到响应

3：接收。已经收到部分响应数据

4：完成。已经收到全部响应数据

status
响应的HTTP状态码，如 200 ：成功，而 404：“Not Found” 错误，202：请求被接受但尚未成功，400：错误请求，500：内部服务器错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。
statusText
HTTP 状态的说明，如"OK"，“Not Found”。当状态为 200 的时候它是 “OK”，当状态为 404 的时候它是 “Not Found”。和 status 属性一样，当 readyState 小于 3 的时候读取这一属性会导致一个异常。
responseText
作为响应主体被返回的文本。如果 readyState 小于 3，这个属性就是一个空字符串。当 readyState 为 3，这个属性返回目前已经接收的响应部分。如果 readyState 为 4，这个属性保存了完整的响应体。
responseXML
如果响应的内容类型是"text/xml"或"application/xml"，这个属性将保存着响应数据的XML DOM文档。

方法

open()
作用：初始化请求

xhr.open(method,url,async,user,password)

method 请求方式，如get,post,put等等

url 请求路径，可以是相对路径也可以是绝对

async 是否异步请求传布尔值，默认true

user 用户名,可选参数,为授权使用;默认参数为空string.

password 密码,可选参数,为授权使用;默认参数为空string.

setRequestHeader()
作用：设置请求头

参数两个，第一个请求体名称header，第二个要赋的值value。

需要在open方法后调用。

在发送POST请求时，必须设置请求头。服务端通常是根据请求头（headers）中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码，再对主体进行解析。

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//urlencoded : url   encoded

application/x-www-form-urlencoded：

编码格式：将键值对的参数用&连接起来，如果有空格，将空格转换为+加号；有特殊符号，将特殊符号转换为ASCII HEX值

浏览器的原生 form 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据，对于Get请求，是将参数转换?key=value&key=value格式，连接到url后。POST请求类似于下面这样（无关的请求头在本文中都省略掉了）：

POST http://www.example.com HTTP/1.1
Content-Type: application/x-www-form-urlencoded;charset=utf-8
title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3

send()
作用：发送请求

参数为发送的请求体，不传请求体的话最好传个null

abort()
作用：取消当前响应，关闭连接并且结束任何未决的网络活动。

这个方法把 XMLHttpRequest 对象重置为 readyState 为 0 的状态，并且取消所有未决的网络活动。例如，如果请求用了太长时间，而且响应不再必要的时候，可以调用这个方法。

getResponseHeader()
作用：返回指定响应头的值

参数：响应头的名称

getAllResponseHeaders()
作用：返回所有头部信息的字符串

实现Ajax

建立XMLHttpRequest对象
为XHP设置状态响应函数和初始化参数
发送请求

处理字符串响应

var xhp;
$("#btn").click(function(){
    xhp = new XMLHttpRequest();//1. 建立XMLHttpRequest对象
    var tmp = $("input[name='u_id']").val();
    if(xhp != null){
        xhp.onreadystatechange=getResult;//2. 为XHP设置状态响应函数
        xhp.open('POST','MyServlet',true);//3.设置初始化参数
        xhp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhp.send("u_id="+tmp+""&pwd="+"12345");//4. 发送请求，参数为请求体
    }
});
function getResult(){
    if(xhp.readyState == 4){
        if(xhp.status == 200)
            alert("收到的："+xhp.responseText);
        else
            alert("请求出错");
    }
}

处理XML响应

xml响应

<?xml version="1.0" encoding="UTF-8"?>
<mr>
    <books>
        <book>
            <title>
                JavaWeb程序开发范例宝典
            </title>
            <publisher>
                人民邮电出版社
            </publisher>
        </book>
        <book>
            <title>
                Java范例完全自学手册
            </title>
            <publisher>
                人民邮电出版社
            </publisher>
        </book>
    </books>
</mr>

处理

functiongetResult() {
        if (http_request.readyState == 4) { //判断请求状态
            if (http_request.status == 200) { //请求成功，开始处理响应
                var xmldoc = http_request.responseXML;
                varstr = "";
                for (i = 0; i < xmldoc.getElementsByTagName("book").length; i++) {
                    var book = xmldoc.getElementsByTagName("book").item(i);
                    str = str + "《" + book.getElementsByTagName("title")[0].firstChild.data + "》由“" + book.getElementsByTagName('publisher')[0].firstChild.data + "”出版<br>";
                }
                document.getElementById("book").innerHTML = str; //显示图书信息
            } else { //请求页面有错误
                alert("您所请求的页面有错误！");
            }
        }
    }

小松萘

关注

0
点赞
踩
0

收藏

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

借鉴于这里简介Asynchronous JavaScript and XML——异步JavaScript和XMLAJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。包含的技术AJAX基于现有的Internet标准，并且联合使用它们：l XMLHttpRequest 对象 (异步的与服务器交换数据)l JavaScript/DOM (信息显示/交互)l CSS (给数据定义样式)l XML (作为转换数据的格式)工作原理简述通过XmlHttpRequest对象来向
复制链接

扫一扫