AJAX （GET请求/POST请求 /同步异步）

最新推荐文章于 2024-03-01 11:06:11 发布

403_ss

最新推荐文章于 2024-03-01 11:06:11 发布

阅读量784

点赞数

分类专栏： AJAX

本文链接：https://blog.youkuaiyun.com/weixin_40980087/article/details/101031108

版权

AJAX 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了AJAX的核心概念，包括其用于实现无需刷新页面即可获取服务器数据的功能。强调了XMLHttpRequest对象在不同浏览器版本中的兼容性问题，详细解释了AJAX请求的五个readyState状态，以及GET和POST请求的区别。同时，讨论了同步与异步请求的执行方式，并给出了使用示例。最后提到了处理大型响应数据的方法和art-template模板引擎的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AJAX（Asynchronous JavaScript and XML），异步的JavaScript与XML技术。

AJAX是浏览器提供的一套API 可以通过Javascript调用，从而实现通过代码控制请求与响应，实现网络编程。

在浏览器端进行网络编程（发送请求，接受响应）的技术方案，可以让我们无需重新加载页面，通过javascript 直接获取服务器端的最新内容。

注意：涉及到AJAX “不能” 以文件协议的方式打开

步骤：

// 1.创建对象  安装浏览器（用户代理）
var  xhr = new XMLHttpRequest()

//2.建立连接   打开浏览器 
xhr.open('GET','http://learn.php')

//3.发送请求
xhr.send()
    
   指定事件处理函数

//4.等待响应

//5.结果

注意：XMLHttpRequest 在IE5/6中不兼容

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')

注意：

当readyState ===4 等于 xhr.onload （有兼容性。XMLHttpRequest2.0有的）

3.发送请求后，指定事件处理函数，接受响应

//由于服务器响应需要时间，所以是无法通过返回值的方式 返回响应的数据
var  response = xhr.send（）


//客户端无法知道服务器什么时候才能返回响应，所以AJax API采用事件机制让服务器返回响应后通知我们响应已经结束了

xhr.addEventListener("readystatechange",function(){
        //console.log(this.readyState);
        if(this.readyState !=) 4 return  
        console.log(this.resposeText)

    },false);

readystatechange 事件状态改变时就触发。

readyState 有五个状态（ 0 1 2 3 4 ）：

0. UNSET 对象被创建

1. OPENED open方法被调用，建立连接

2. HEADS_RECEIVED 已经接受到响应报文的响应头

3. LOADING 正在下载响应报文的响应体

4. DONE 整个响应报文已经接受

XMLHttpRequest 遵循HTTP协议

GET请求

一般不需要设置请求体

POST请求

需要设置请求头请求体，请求头的Content-type 要与请求体的数据格式一致

表单提交数据一般是form-date ，当为Request Rayload 说明请求头与请求体的数据格式不一致

xhr.open('POST',/date.php)   //设置请求行
xhr.setRequestHeader('FO')      //设置请求头内容
  
xhr.send({"vauel"：1})   //设置请求体内容 ， 表单提交数据一般 Form-date

xhr.onreadystate= function (){

  if(this.readyState ===4) {

  console.log(this.status);      //获取响应状态码
  console.log(this.statusText)  //获取响应状态描述

  console.log(this.getAllResponseHeaders)     //获取全部响应头
  console.log(this.getResponseHeader('Content-type'))   //获取特定格式的响应头
 
  console.log(this.responseText)     //获取响应体
  console.log(this.responseXML)      //获取xml格式的响应体
 }  

}

响应类型：

this.response : 获取的数据会根据 this.responseType 变化（二进制数据，html5新内容）

this.responseText : 获取的是字符串形式的响应体

客户端、服务器数据传输

1.客户端发送给服务器POST（字符串 send(`username=${username}&password=${password}`)） //GET send(null)

2.服务器接受客户端 $_POST['username'] //GET $_GET['id']

3. 服务器传给客户端（json 格式 $json = json_encoed( $data echo( $json) )）

4. 客户端接收服务器 json格式数据转为数组 var data = JSON.parse(this.responseText)

同步、异步

同步：先吃饭，后打电话

异步：边吃饭边听电话

open（）方法

var xhr  = new XMLHttpRequest();

xhr.open ( ,  , async)    第三个参数代表异步，布尔型 ，默认为true，false 表示同步，会有线程阻塞

time函数：

查看某一段范围内的代码 执行时间time() 函数

console.time（'ajax'）     //括号里面可以换成任意字符串

代码

console.timeEnd（'ajax'）

处理大型服务器响应数据：

art-template 引擎