实现Ajax异步交互-函數-匯編語言學習筆記

实现Ajax异步交互

2023-09-10 阅读 18 评论 0

摘要：实现Ajax的执行步骤 1.创建Ajax的核心对象XMLHttpRequest对象 function createXMLHttpRequest(){//创建Ajax的核心对象XMLHttpRequest对象是固定的不管是什么只要是创建XMLHttpRequest对象的就是用这个var httpRequest;if(window.XMLHttpRequest){//XMLHttpRequest存在就是

实现Ajax的执行步骤

1.创建Ajax的核心对象XMLHttpRequest对象

function createXMLHttpRequest(){//创建Ajax的核心对象XMLHttpRequest对象 是固定的 不管是什么只要是创建XMLHttpRequest对象的就是用这个var httpRequest;if(window.XMLHttpRequest){//XMLHttpRequest存在  就是适用于Chrome，Firefox.... 大部分的浏览器httpRequest = new XMLHttpRequest();}else if(window.ActiveXObject){//ActiveXObject存在  就是用于IE浏览器 就他一个try{httpRequest = new ActiveXObject('Msxml2.XMLHTTP');//IE 7以上}catch(e){//报错了就不是IE7以上try{httpRequest = new ActiveXObject('Microsoft.XMLHTTP');//IE 6以下}catch(e){}}}return httpRequest;
}

2.通过XMLHttpRequest对象的open()方法与服务器建立连接

3.构建请求所有数据内容，并通过XMLHttpRequest对象的send()方法发给服务器

4.通过XMLHttpRequest对象提供的onreadystatechange事件监听服务器的通信状态

实现异步的几种方式？5.接收并处理服务器向客户端响应的数据结果

6.将处理结果更新到HTML页面中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button id="btn">按钮</button>
</body>
<script src="../9.2/创建XMLHTTPRequest对象.js"></script>
<!-- 引入写好的适配浏览器的创建XMLHTTPRequest对象 -->
<script>var btn = document.getElementById('btn');btn.addEventListener('click',function(){//实现ajax的异步交互//创建XMLHTTPRequest对象var xhr = createXMLHttpRequest();//通过XMLHTTPRequest对象的open方法与服务器建立连接  //open方法有四种参数格式//第一种两个参数  method 和 url                                                method是请求方法    url是发送请求的路径和地址//第二种三个参数  method 和 url 和 async(可选)                                 async是 是否异步  布尔参数 true为异步  false为同步  基本不用//第二种四个参数  method 和 url 和 async(可选) 和 user(可选)                    user用户名认证//第二种五个参数  method 和 url 和 async(可选) 和 user(可选) 和 password(可选)   password密码认证xhr.open('get','http://127.0.0.1:1877/Ajax/%E4%BB%A3%E7%A0%81/9.2/02%E6%B5%8B%E8%AF%95XMLHttpRequest%E5%AF%B9%E8%B1%A1.html');//调用XMLHTTPRequest对象的send()方法 将客户端需要发送的数据发送给服务器//send方法//如果不传递任何内容时  向方法的参数为nullxhr.send(null);//利用XMLHTTPRequest对象的onreadystatechange事件  监听服务器的通信状态  xhr.onreadystatechange = function(){//监听通信状态//XMLHTTPRequest对象的readyState属性 表示服务器的通信状态  值为0 1 2 3 4//0是未初始化 就是没有调用open  1是open方法被调用   2是send方法被调用 //3是正在返回、响应   4是响应完毕if(xhr.readyState === 4){//服务器端的通信状态中  会存在处理完毕的信号 这个时候接受服务器返回的处理结果//XMLHTTPRequest对象的responseText属性 用于接收服务器的响应结果console.log(xhr.responseText);}}//把这些接收到的结果更新到HTML页面上})
</script>
</html>

原文链接：https://hbdhgg.com/3/39370.html

发表评论: