Ajax第一部分笔记

最新推荐文章于 2024-09-16 20:08:29 发布

你过来啊zzz

最新推荐文章于 2024-09-16 20:08:29 发布

阅读量156

点赞数

文章标签： ajax javascript js

本文链接：https://blog.csdn.net/Depressione/article/details/108364611

版权

同步交互与异步交互

同步交互是什么

所谓同步交互，就是指客户端向服务器发送请求，必须等待返回结果，才能发送下一个请求。同步交互相当于排队，轮到下一个轻快会因为前一个有所不同。

在这里插入图片描述

异步交互是什么

所谓异步交互，就是指客户端发送一个请求，不需要等待返回结果，随时可以发送下一个请求。同步交互与异步交互的区别在于同步交互需要等待结果，而异步交互不需要等待。

在这里插入图片描述

异步交互的优势

用户操作无须像同步交互必须等待结果
异步交互只需要与服务端交换必要的数据内容，而不是将所有的数据全部更新
异步交互对带宽造成的压力比同步交互更小
通过Ajax实现异步交互不需要任何第三方插件，只要浏览器支持JavaScript语言即可

异步交互的劣势

异步交互破坏了浏览器原有的前进和后退机制
如果后面逻辑的执行依靠前面逻辑执行的结果的话，异步交互可能会造成问题
Ajax实现异步交互对搜索引擎支持较弱
Ajax实现异步交互可能会引起一些Web安全问题，例如SQL注入供给、跨站点脚本攻击等等

Ajax

Asynchronous JavaScript + XML（异步JavaScript和XML）, 其本身不是一种新技术，而是一个在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，当使用结合了这些技术的AJAX模型以后，网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。

尽管X在Ajax中代表XML, 但由于JSON]的许多优势，比如更加轻量以及作为Javascript的一部分，目前JSON的使用比XML更加普遍。JSON和XML都被用于在Ajax模型中打包信息。

Ajax涉及到的技术

Ajax只是为了实现异步交互的手段，不是一种技术，而是多种技术的整合，其中包括：

HTML页面
Cascading Style Sheets ( CSS )
JavaScript脚本语言
Document Object Model ( DOM)
XML
XMLHttpRequest对象（实现Ajax异步交互的核心）

Ajax工作原理

在这里插入图片描述

Ajax的核心对象

核心就是XMLHttpRequest对象，该对象为客户端提供了在客户端和服务器之间传输数据的功能。

XMLHttpRequest对象提供了一个通过URL来获取数据的简单方式，并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。

XMLHttpRequest对象最初由微软设计，随后被Mozilla、Apple和Google采纳。如今，该对象已经被W3C组织标准化。通过该对象，可以很容易地得到一个URL上的资源数据。尽管名字里有XML，但XMLHttpRequest对象可以得到所有类型的数据资源，并不局限于XML格式的数据。

实现Ajax的执行步骤

创建Ajax的核心对象XMLHttpRequest对象
通过XMLHttpRequest对象的open(方法与服务器端建立连接
构建请求所需的数据内容，并通过XML HttpRequ Jest对象的send()方法发送给服务器端
通过XMLHttpRequest对象提供的onreadystatechange事件监听服务器端的通信状态
接收并处理服务器端向客户端响应的数据结果
将处理结果更新到HTML页面中

创建Ajax的核心对象

function createXMLHttpRequest(){
	var httpReguest;
	if (window.XMLHttpRequest) {//适用于Chrome, Firefox, Safari, ..
    	httpRequest = new XMLHttpRequest();
    } else if(window.ActiveXObject) {//适用于IE浏览器
    	try {
    		httpRequest = new ActiveXObiect("Msxml2.XMLHTTP");//IE 7+
    	} catch(e){
    		try {
    			httpRequest = new ActiveXObject("Microsoft.XMLHTTP");// IE 6- 
    		} catch(e){}
        }
    }
    return httpRequest;
}

建立Ajax异步请求连接

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实现Ajax的步骤</title>
</head>

<body>
    <button id="btn">按钮</button>
</body>
<script src="./createXMLHttpRequest.js"></script>
<script>
    var btn = document.getElementById('btn') //获取按钮
    btn.addEventListener('click', function () { //给按钮绑定点击事件
        //实现Ajax的异步交互
        //1.创建XMLHttpRequest对象
        var xhr = createXMLHttpRequest();
        //2.调用XMLHttpRequest对象的open()方法与服务器建立连接
        xhr.open('get', '测试url')

        //3.调用XMLHttpRequest对象的send()方法，将客户端页面的数据发送给服务器端
        xhr.send(null)

        //4.利用XMLHttpRequest对象的onreadystatechange事件，监听服务器端的通信状态
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                console.log(xhr.responseText);
            }
        }

        //5.将接受的结果更新到html中
    })
</script>

</html>

XMLHttpRequest对象的open(method,url)方法
- method -表示当前的请求方式
  - 常见的请求方式为GET 和 POST
- url -表示当前请求的服务器端地址链接
XMLHttpRequest对象的send()方法
- 作用：将客户端页面的数据发送给服务器端
- send()方法如果不传递任何数据内容时，则参数为null，不可以不写参数

XMLHttpRequest对象的onreadystatechange事件

作用：用于监听服务器通信状态
XMLHttpRequest对象的readyState属性

readyState 属性(表示服务器端的通信状态)

值	状态	描述
0(未初始化)	UNSEND	代理对象已经被创建，但尚未调用open()方法
1(载入)	OPENED	open()方法已经调用，建立与服务端口特定的链接
2(载入完成)	HEADERS_RECEIVED	send()方法已经被调用，并获得了状态行和响应头
3(交互)	LOADING	响应体下载中，可能已经下载部分数据了
4(完成)	DONE	响应体下载完成，可以直接使用responseText

xhr.onreadystatechange = function () { // 监听服务器端的通信状态
    if(xhr.readyState === 4){
		console.log(xhr.responseText);
    }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>readyState属性</title>
</head>

<body>
    <button id="btn">按钮</button>
</body>
<script src="./createXMLHttpRequest.js"></script>
<script>
    var btn = document.getElementById('btn')
    btn.addEventListener('click', function () {
        var xhr = createXMLHttpRequest();
        xhr.onreadystatechange = function () {
            console.log(xhr.readyState)
            if (xhr.readyState === 4) {
                //此时不光要监听到响应完成，还要保证当前的异步请求一定是正确的
                /*
                XMLHttpRequest的status
                作用：得到当前请求的响应状态码
                常见：
                200 成功
                304 请求资源未变化（转向来获取本地缓存）
                404 服务器端地址为找到
                */
                console.log(xhr.status)
                if (xhr.readyState === 4 && xhr.status === 200) {
                    /*
                    接收服务器端响应的结果
                    responseText属性- 专门接收字符串 类型的结果内容
                    responseXML属性 - 专门接收XML数据格式的结果内容
                    */
                    console.log(xhr.responseText);
                }
            }
        }
        xhr.open('get', '测试url')
        xhr.send(null)

    })
</script>

</html>

通过Ajax异步请求数据

调用XMLHttpRequest对象的send()方法向服务器端发送请求数据

send(data)方法： data表示要向服务器端发送的请求数据
请求方式：不写method的话，默认为get
- 如果当前的请求方式为GET的话 send()方法中只能传递null值
- 将请求数据添加请求链接地址中例如：xhr.open('get','地址?user=zhangwuji&pwd=123456');
两种情况
- 发送数据： user=zhangwuji&pwd=123456
  - 请求数据的格式
    - 如果具有多个请求数据的话，之间使用"&"进行分隔
    - 每个数据格式： name=value
- 不发送数据：send()方法中必须传递null值，而不能为空

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>send()方法</title>
</head>

<body>
    <!-- 提交表单时，向服务器端发送数据
        不写method的话，默认为get
        请求数据被添加请求链接地址中    ?user = 小明&password=123123

        请求数据格式：
            1.如果具有多个请求数据的话，之间用&进行分割
            2.每个数据格式为  name=value
    -->
    <form action="#">
        <input type="text" id="user" name="user">
        <input type="text" id="pwd" name="pwd">
        <input type="submit">
    </form>
    <button id="btn">按钮</button>
</body>
<script src="./createXMLHttpRequest.js"></script>
<script>
    var btn = document.getElementById('btn')
    btn.addEventListener('click', function () {
        var xhr = createXMLHttpRequest();
        xhr.onreadystatechange = function () {
            console.log(xhr.readyState)
            if (xhr.readyState === 4) {
                console.log(xhr.status)
                if (xhr.readyState === 4 && xhr.status === 200) {
                    console.log(xhr.responseText);
                }
            }
        }
        xhr.open('get', '测试url')
        //向服务器端发送请求数据
        /*
        send(data)方法：
            data:表示要向服务器端发送的请求数据

        两种情况：
            发送数据：请求数据格式：
                    1.如果具有多个请求数据的话，之间用&进行分割
                    2.每个数据格式为 name=value
            不发送数据：send()参数必须要写，不发送数据就写null    
        */
        //人为的方式获取当前的格式，构建成指定的数据格式
        xhr.send(null)

    })
</script>

</html>

GET与POST请求方式

GET请求方法

Ajax异步交互中使用GET请求方式的话，需要注意以下几个问题：

1.将构建的请求数据添加到open()方法中的url地址中

xhr.open('get', '测试url?name=小明&password=123456'，true)

上述代码中，name=小明&password=123456表示请求数据

2.将发送请求数据的send()方法中的参数设置为null

xhr.send(null)

POST请求方法

Ajax异步交互中使用POST请求方式的话，需要注意以下几个问题：

1.调用send()方法之前，需要通过XMLHttpRequest对象的setRequestHeader()方法设置请求头信息。

xhr.setRequestHeader(header,value)

header：将要被赋值的请求头名称
value：给指定的请求头赋值

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

2.通过XMLHttpRequest对象的send()方法请求数据

你过来啊zzz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫