学习AJAX必知必会(2)~Ajax基本使用,设置请求行、请求体、请求头,服务端响应JSON数据

简介: 学习AJAX必知必会(2)~Ajax基本使用,设置请求行、请求体、请求头,服务端响应JSON数据

一、Ajax的基本使用

1、核心对象 XMLHttpRequest,AJAX 的所有操作都是通过该对象进行的。

2、发送ajax请求(4个步骤):

  • 创建xhr对象,然后open方法初始化,设置请求方式和请求路径,接着send方法发送请求,从而接收服务端响应回来的数据(通过绑定事件onreadystatechange
//Ajax发送get请求
//1、创建XmlHttpRequset对象
const xhr = new XMLHttpRequest();
//2、通过xhr对象的open方法进行初始化,设置请求方式get和请求url,请求参数(第一个参数使用?,其余使用&)
xhr.open('get', 'http://127.0.0.1:8000/server?a=1&b=2');
//3、发送Ajax请求
xhr.send();
//4、事件绑定,处理服务端返回结果
xhr.onreadystatechange = function () {
    //处理前判断服务端是否返回所有结果和服务端的状态码是2**
    if(xhr.readyState === 4){
        if(xhr.status >= 200 && xhr.status < 300){
            //处理结果(响应行、响应头、空行、响应体)
            // //1、响应行
            // console.log(xhr.status);//状态码
            // console.log(xhr.statusText);//状态字符串,若成功响应式为OK
            // console.log(xhr.getAllResponseHeaders());//所有响应头
            // console.log(xhr.response);//所有响应体
            //将响应内容显示到dom视图
            result.innerHTML = xhr.response;
        }
    }
}


onreadystatechange (on 意思是:当...的时候;readystate:是XmlHttpRequset对象的状态属性,有五个值,分别是0、1、2、3、4 )

0 未初始化

1 open方法调用完毕

2 send方法调用完毕

3 服务端返回部分结果

4 服务端返回所有结果


//Ajax发送post请求(跟get请求不同的地方:open方法第一个参数是post,然后请求参数(请求体)是设置为send方法的参数)
//1、创建XmlHttpRequset对象
const xhr = new XMLHttpRequest();
//2、通过xhr对象的open方法进行初始化,设置请求方式post和请求url
xhr.open('post', 'http://127.0.0.1:8000/server');
//3、发送Ajax请求(设置请求参数)
xhr.send('a=1&b=2');
//4、事件绑定,处理服务端返回结果
xhr.onreadystatechange = function () {
    //处理前判断服务端是否返回所有结果和服务端的状态码是2**
    if(xhr.readyState === 4){
        if(xhr.status >= 200 && xhr.status < 300){
            //处理结果(响应行、响应头、空行、响应体)
            // //1、响应行
            // console.log(xhr.status);//状态码
            // console.log(xhr.statusText);//状态字符串,若成功响应式为OK
            // console.log(xhr.getAllResponseHeaders());//所有响应头
            // console.log(xhr.response);//所有响应体
            //将响应内容显示到dom视图
            result.innerHTML = xhr.response;
        }
    }
}


3、设置请求头(在xhr的send方法之前进行设置)

  • 通过xhr.setRequestHeader方法
//设置请求头
  //属性:Content-Type:设置请求体的类型
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  //也可以自定义请求头,但是需要服务端设置允许,
  // 例如服务端的代码中添加响应头的设置:response.setHeader('Access-Control-Allow-Headers', '*');
  //自定义请求头
  xhr.setRequestHeader('custom', '111');


✿ 总结一下:在Ajax请求中设置请求行、请求体、请求头

(1)请求行的请求方式、请求路径设置在xhr对象的open方法的第一个参数、第二个参数上
(2)请求体(请求参数-要传输的数据): 请求方式是get时,请求参数拼接在请求路径url上,请求方式是post时,请求参数设置为send方法的参数。
(3)请求头在send方法之前进行设置,通过xhr.setRequsetHeader('请求头名', '请求头值')方法进行设置


4、服务端响应Json数据

■ 服务端代码server.js 文件:

  • 通过JSON.stringify(json对象); 将json对象转化成字符串,然后再响应给客户端-
//3、创建路由规则
//请求方式设置为all,可以接收http任意类型的请求
app.all('/server', (request, response) => {
    //设置响应头(允许跨域)
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应头(允许自动自定义请求头)
    response.setHeader('Access-Control-Allow-Headers', '*');
     //响应一个json数据(因为send方法的参数类型是字符串,所以需要先对json数据进行转化)
    const data = {
        name: '小明',
        age: 18,
        sex: '男'
    };
    //data 数据类型转化(通过JSON.stringify()方法进行转化),
    // 接收的时候通过设置响应体数据格式为json即可,也可以通过JSON.parse(xhr.response) 将数据类型转为json对象
    let str = JSON.stringify(data);
    //设置响应体
    response.send(str);
});


■ 发送ajax请求.html 文件:

  • 客户端的html代码中设置xhr响应数据格式为Json; xhr.responseType = 'json';
<script>
    //获取按钮
    const btn = document.getElementsByTagName('button')[0];
    const result = document.getElementById('result');
    btn.onclick = function () {
        // console.log('test');
        //接下来发送ajax请求(4个步骤)
        //1、创建XmlHttpRequset对象
        const xhr = new XMLHttpRequest();
        //设置响应的数据格式为json
        xhr.responseType = 'json';
        //2、通过xhr对象的open方法进行初始化,设置请求方法和请求url,请求参数(第一个参数使用?,其余使用&)
        xhr.open('get', 'http://127.0.0.1:8000/server');
        //设置请求头
        //属性:Content-Type:设置请求体的类型
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        //也可以自定义请求头,但是需要服务端设置允许,
        // 例如服务端的代码中添加响应头的设置:response.setHeader('Access-Control-Allow-Headers', '*');
        //自定义请求头
        xhr.setRequestHeader('custom', '111');
        //3、发送Ajax请求
        xhr.send();
        //4、事件绑定,处理服务端返回结果
        xhr.onreadystatechange = function () {
            //处理前判断服务端是否返回所有结果和服务端的状态码是2**
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    //处理结果(响应行、响应头、空行、响应体)
                    // //1、响应行
                    // console.log(xhr.status);//状态码
                    // console.log(xhr.statusText);//状态字符串,若成功响应式为OK
                    // console.log(xhr.getAllResponseHeaders());//所有响应头
                    // console.log(xhr.response);//所有响应体
                    //将响应内容显示到dom视图
                    // result.innerHTML = xhr.response;
                    console.log(xhr.response);
                }
            }
        }
    }
</script>
目录
相关文章
|
3月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
78 3
|
3月前
|
安全 JavaScript
如何在`package.json`中正确设置依赖版本范围?
正确设置 `package.json` 中的依赖版本范围需要综合考虑项目的需求、依赖库的稳定性和兼容性,以及开发和维护的便利性等因素。通过合理选择版本范围符号,并结合定期的审查和测试,可以有效地管理项目依赖,确保项目的稳定运行。
82 1
|
3月前
|
JSON Java 数据格式
springboot中表字段映射中设置JSON格式字段映射
springboot中表字段映射中设置JSON格式字段映射
175 1
|
4月前
|
Web App开发 前端开发 JavaScript
Python编程—Ajax数据爬取(一)
Python编程—Ajax数据爬取(一)
82 0
|
4月前
|
前端开发 NoSQL MongoDB
Python编程—Ajax数据爬取(二)
Python编程—Ajax数据爬取(二)
134 0
|
5月前
|
JSON 前端开发 数据格式
layui 穿梭框transfer组件 数据data用ajax来获取
layui 穿梭框transfer组件 数据data用ajax来获取
274 2
|
26天前
|
JSON 前端开发 搜索推荐
关于商品详情 API 接口 JSON 格式返回数据解析的示例
本文介绍商品详情API接口返回的JSON数据解析。最外层为`product`对象,包含商品基本信息(如id、name、price)、分类信息(category)、图片(images)、属性(attributes)、用户评价(reviews)、库存(stock)和卖家信息(seller)。每个字段详细描述了商品的不同方面,帮助开发者准确提取和展示数据。具体结构和字段含义需结合实际业务需求和API文档理解。
|
19天前
|
JSON 缓存 API
解析电商商品详情API接口系列,json数据示例参考
电商商品详情API接口是电商平台的重要组成部分,提供了商品的详细信息,支持用户进行商品浏览和购买决策。通过合理的API设计和优化,可以提升系统性能和用户体验。希望本文的解析和示例能够为开发者提供参考,帮助构建高效、可靠的电商系统。
35 12
|
4月前
|
数据采集 JSON 数据处理
抓取和分析JSON数据:使用Python构建数据处理管道
在大数据时代,电商网站如亚马逊、京东等成为数据采集的重要来源。本文介绍如何使用Python结合代理IP、多线程等技术,高效、隐秘地抓取并处理电商网站的JSON数据。通过爬虫代理服务,模拟真实用户行为,提升抓取效率和稳定性。示例代码展示了如何抓取亚马逊商品信息并进行解析。
抓取和分析JSON数据:使用Python构建数据处理管道
|
3月前
|
JSON API 数据安全/隐私保护
拍立淘按图搜索API接口返回数据的JSON格式示例
拍立淘按图搜索API接口允许用户通过上传图片来搜索相似的商品,该接口返回的通常是一个JSON格式的响应,其中包含了与上传图片相似的商品信息。以下是一个基于淘宝平台的拍立淘按图搜索API接口返回数据的JSON格式示例,同时提供对其关键字段的解释