原生Ajax之GET、POST请求

淡淡的烟草味﹌ 2022-06-02 03:54 583阅读 0赞

> **ajax可以接收什么信息？**  
> 答：浏览器可以接收的信息ajax都可以接收，例如字符串、html标签、css样式内容、xml内容、json内容等等。  
> http请求方式：post 、get 、put 、heade、delete、trace Connect 、options….
> 
> **ajax 对象成员:**
> 
> **属性成员:**  
> 1. `responseText` : 以字符串形式接受服务端返回的信息  
> 2. `readyState` : ajax对象的状态  
> `0:ajax对象创建完毕 1:已经调用open方法 2:已经调用send方法 3:数据已经返回一部分 4:数据返回完毕`
> 
> `onreadystatechange` : 事件属性(对讲机)  
> readyState属性值发生变化的时候该事件被触发执行,为了获得较多的状态细信息,在对象创建完毕后设置该事件最多只能感知readyState的1/2/3/4状态值
> 
> **方法成员:**
> 
> `open()`创建一个新的http请求  
> `send()`把http请求发送给服务端

`responseText` 先接受数据  
`readyState`是： AJAX对象的维持状态 xhr.readyState == 4;表示数据接受完毕  
`Onreadystatechange` ：事件监听 属于事件on 用来判断readyState的状态值，判断数据是否已经接受完毕。

> **ajax对象.open(get/post, 请求地址);**

**GET请求**

<script type="text/javascript">
        function f1(){
        var nm  = document.getElementById('username).value;
        //对特殊字符进行处理
        nm = encodeURLComponent(nm);
            //①创建对象
            var xhr = new XMLHttpRequest();
            //④设置事件,感知readyState状态变化,进而获得服务器的返回信息
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    alert(xhr.responseText);  //返回数据
                }
                //② 创建新的http请求
                xhr.open('get','./03.php?id='+nm);
                //③ 发送请求
                xhr.send(null);
            }
        }
    </script>

**post请求**

<script type="text/javascript">
        function checkname(){
        var nm  = document.getElementById('username).value;
        //对特殊字符进行处理
        nm = encodeURLComponent(nm);
            //①创建对象
            var xhr = new XMLHttpRequest();
            //把需要传递的信息转化为字符串格式
            var info = "name"+nm+"&ag=20";
            //④设置事件,感知readyState状态变化,进而获得服务器的返回信息
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    alert(xhr.responseText);  //返回数据
                }
                //② 创建新的http请求
                //post方式传递数据是模拟form表单方式传递的数据
                xhr.open('get','./04.php?color=red');
            //设置http头协议,把传递的post数据转化为xml格式
            //setRequestHeader方法必须放在open方法的后边调用
    xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
                //③ 发送请求
                xhr.send(info);
            }
        }
    </script>

**ajax对缓存的处理**

> 动态程序文件避免缓存效果：  
> ① 保证每次请求都是不同的请求 \[推荐使用\]  
> ② 设置header头禁止浏览器缓存当前的动态页面
> 
> 方法一、请求地址后面添加随机数 `+Math.random();`  
> 方法二、 在服务气端(php)设置响应头  
> `//设置header头,禁止浏览器缓存当前页面`  
> `header('Cache-Control:no-cache');`  
> `header('Pragma:no-cache');`  
> `header('Expires:-1');`

发表评论取消回复

表情：

评论列表（有 0 条评论，583人围观）

还没有评论，来说两句吧...

相关阅读

相关使用原生AJAX请求数据

一、什么是AJAX AJAX英文全称 Asynchronous Javascript And XML（异步的JavaScript和XML），是指一种创建交互式网页应用的网

约定不等于承诺〃/ 2023年10月12日 22:11/ 0 赞/ 19 阅读

相关原生ajax请求之前端

前端发送ajax请求，并采用restful风格。 var xhr = createXHR(); xhr.onreadystatech

柔情只为你懂/ 2023年10月09日 11:45/ 0 赞/ 61 阅读

相关异步请求ajax介绍，原生ajax，$.ajax基本使用

在这篇文章中，我们将学习ajax的工作原理，已经使用原生的ajax和jquery的ajax来进行编程练习。 -------------------- 目录 ajax原理介

不念不忘少年蓝@/ 2023年09月30日 12:05/ 0 赞/ 20 阅读

相关 getpost请求的区别

1, get是从服务器上获取数据，post是向服务器传送数据。 2, get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应

一时失言乱红尘/ 2022年06月03日 02:27/ 0 赞/ 387 阅读

相关原生Ajax之GET、POST请求

> ajax可以接收什么信息？ > 答：浏览器可以接收的信息ajax都可以接收，例如字符串、html标签、css样式内容、xml内容、json内容等等。 > http请

淡淡的烟草味﹌/ 2022年06月02日 03:54/ 0 赞/ 584 阅读

相关 JavaScrip原生Ajax请求实现

首先给触发元素绑定事件 1. 创建异步对象——var Ajax = new XMLhttpRequest(); 2. 连接到服务器——Ajax.open("请求方

﹏ヽ暗。殇╰゛Y/ 2022年05月31日 00:58/ 0 赞/ 280 阅读

相关 javascript 原生ajax 请求

设置自定义的ajax 的请求,并增加回调方法兼容不同的浏览器 //原生js ajax 请求 function execAjax(url,date,f

╰+哭是因爲堅強的太久メ/ 2022年05月23日 23:50/ 0 赞/ 277 阅读

相关原生JS Ajax请求

传统方法的缺点: 传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,每当服务器处理客户端提交的请求时,客户都只能

ゝ一纸荒年。/ 2022年05月11日 09:20/ 0 赞/ 305 阅读

相关原生ajax请求与jquery-ajax请求

ajax请求可以在不刷新页面的情况下，请求后台服务器为了演示的效果，在jsp中添加一段视频，再播放视频的时候请求后台，看效果。普通表单提交返回数据，会刷新页面使

约定不等于承诺〃/ 2022年02月04日 08:29/ 0 赞/ 448 阅读

相关原生js封装ajax请求

一个完整的ajax请求封装，适用场景： 1. get 请求 2. post请求 3. 表单提交方式 4. 表单上传文件 function ajax(opti

向右看齐/ 2021年12月14日 06:29/ 0 赞/ 444 阅读