首页 > 其他分享 >AJAX请求的步骤解析与优化方法

AJAX请求的步骤解析与优化方法

时间:2024-09-20 10:51:55浏览次数:10  
标签:get true 步骤 send xhr AJAX new 解析 open

ajax的请求过程

1、新建ajax对象:
    IE6不兼容new XMLHttpRequest();
    IE6下,ajax对象的兼容方法:

        window判断的方法:
            var xhr = null;
            if (window.XMLHttpRequest) {    xhr = new XMLHttpRequest();    }
            else {    xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);    }

        try判断的方法:
           var xhr = null;
            try {    xhr = new XMLHttpRequest();    }
            catch (e) {    xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);    }

2、发送请求的准备工作 :

    通过get、post发送某个信息,但是这一步无法显示出来,相当于网址,post方式,文件信息地址在xhr.send();中

    open()有3个参数:请求方式、请求地址、是否异步

    如:xhr.open(‘get‘,‘1.php‘,true); xhr.open(‘post‘,‘2.post.php‘,true);

    请求方式:get、post、request:

        get方式:

            如:xhr.open(‘get‘,‘2.get.php?username=leo&age=30&‘,true);

            缓存引起无法刷新:在url?后面连接一个随机数,时间轴如:xhr.open(‘get‘,‘2.get.php?username=leo&age=30&‘ new Date().getTime(),true);

            中文乱码无法显示:编码encodeURI 如:xhr.open(‘get‘,‘2.get.php?username=‘ encodeURI(‘刘伟‘) ‘&age=30&‘ new Date().getTime(),true);

            如:xhr.send(‘username=刘伟&age=30‘);

        post方式:

            post没有缓存问题

            中文无需编码

            数据放在send()里面作为参数传递  

            在send()前面,必须申明发送的数据类型    如:xhr.setRequestHeader(‘content-type‘, ‘application/x-www-form-urlencoded‘);

    地址(接口):

        静态地址,如:xhr.open(‘get‘,‘1.txt‘,true);

        动态地址:如:xhr.open(‘get‘,‘1.php‘,true);

    是否异步:

        false:同步:阻塞 前面的代码会影响后面代码的执行   很少使用同步(除非后面的操作,需要前面的数据)

        true:异步:非阻塞 前面的代码不会影响后面代码的执行

3、提交发送的请求:
    如:xhr.send();

4、等待服务器返回内容:
    返回正确内容的条件:1、readyState值发生改变    2、readyState属性值为4    3、status属性值为200
    onreadystatechange事件    当状态值发生改变时触发
    readyState属性:请求状态
        0    未初始化)还没有调用open()方法
        1    (载入)已调用send()方法,正在发送请求
        2    (载入完成)send()方法完成,已收到全部响应内容
        3    (解析)正在解析响应内容
        4    (完成)响应内容解析完成,可以在客户端调用了
    status属性:服务器(请求资源)的状态码(http状态码)
        1、消息(1字头)
        2、成功(2字头)  如:200    OK
        3、重定向(3字头)
        4、请求错误(4字头)
        5、服务器错误(5、6字头)
    返回的内容
        responseText:ajax返回的内容,就存在于这个属性下面,以字符串的形式

免费的API接口开放平台

标签:get,true,步骤,send,xhr,AJAX,new,解析,open
From: https://blog.csdn.net/2401_86705976/article/details/142379115

相关文章

  • NOIP 2016 普及组初赛试题及解析(第三部分:阅读程序(1-2))
    ......
  • Spring Cloud全解析:服务调用之Feign的执行流程
    Feign的执行流程首先通过@EnableFeignClients注解开启Feign功能,程序启动时开启对@FeignClient注解的扫描@Retention(RetentionPolicy.RUNTIME)@Target(ElementType.TYPE)@Documented@Import(FeignClientsRegistrar.class)public@interfaceEnableFeignClients当接口......
  • 【C++】C++ STL探索:Priority Queue与仿函数的深入解析
    C++语法相关知识点可以通过点击以下链接进行学习一起加油!命名空间缺省参数与函数重载C++相关特性类和对象-上篇类和对象-中篇类和对象-下篇日期类C/C++内存管理模板初阶String使用String模拟实现Vector使用及其模拟实现List使用及其模拟实现容器适配器Stack与Queue这篇文......
  • PCB双面制造解析,你的板子是这么做出来的
    图形电镀工艺是制造高质量电路板的关键步骤。这一过程不仅需要精确的控制,还涉及到多个复杂的化学和物理操作。一、图形电镀工艺流程首先,让我们从最基本的步骤开始:电路板的制作始于一块覆有铜箔的板材。接下来,根据设计要求,板材会被裁剪并冲钻出基准孔,以确保后续工序的精确......
  • 深入解析Vue 3组合函数:提高代码复用性和模块化的最佳实践
    随着Vue3的引入,组合式API(CompositionAPI)带来了更灵活的代码组织方式,组合函数作为其核心部分,能够显著提升代码的可维护性、复用性和模块化。在这篇文章中,我们将通过一个具体的表格管理和分页功能的示例,详细介绍如何使用组合函数来构建更加高效和清晰的Vue3应用。1.组合函数......
  • java识别是不是ajax请求
    在JavaWeb应用中,识别是否是一个AJAX请求通常可以通过检查HTTP请求头中的X-Requested-With头字段来实现。如果该字段的值为XMLHttpRequest,则可以认为这是一个AJAX请求。示例代码以下是一个示例,展示了如何在SpringMVC控制器中识别AJAX请求:1.SpringMVC控制器importorg.spring......
  • Spring Boot 整合 MyBatis 的详细步骤(两种方式)
    1.SpringBoot配置MyBatis的详细步骤1、首先,我们创建相关测试的数据库,数据表。如下:CREATEDATABASE`springboot_mybatis`USE`springboot_mybatis`CREATETABLE`monster`(`id`intnotnullauto_increment,`age`intnotnull,`birthday`DATEDEFAULTN......
  • 2024Mysql And Redis基础与进阶操作系列(6)作者——LJS[含MySQL 多表之一对一/多;多对多;
    MySQL多表操作1多表关系简介1.1一对一关系比如1.2一对多/多对一关系比如:实现规则:1.3多对多关系举例:规则:2.多表联合查询简介多表查询有以下分类知识补充——笛卡尔积(了解即可)交叉连接查询[产生笛卡尔积]内连接查询(使用的关键字innerjoin--inner可以省......
  • 基于区块链的相亲交易系统源码解析
      随着区块链技术的成熟与发展,其去中心化、不可篡改的特性逐渐被应用于各行各业。特别是在婚恋市场中,区块链技术的应用为相亲平台带来了新的可能性。本文将探讨如何利用区块链技术构建一个透明、高效的相亲交易系统,并提供部分源码示例。区块链的优势区块链技术最大的优势在于其分......
  • Post Pretraing 技术解析
    一、问题描述在大模型训练中,后预训练技术(Post-pretraining)通常指的是在模型的初始预训练阶段和最终的微调阶段之间进行的一个额外训练步骤。这个步骤的目的是进一步调整模型,使其能够更好地适应特定领域或任务,同时保持或增强其从大规模预训练数据中学到的通用知识和特征表示。......