首页 > 其他分享 >现代Web开发中AJAX请求的运作原理

现代Web开发中AJAX请求的运作原理

时间:2024-08-25 12:23:55浏览次数:14  
标签:Web 请求 get true send xhr AJAX new open

ajax的请求过程

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

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

        window判断的方法:
            var xhr = null;
            if (window.XMLHttpRequest) {    xhr = new XMLHttpRequest();    }
            else {    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:

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

        get方式:

            缓存引起无法刷新:在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()前面,必须申明发送的数据类型    如:xhr.setRequestHeader(‘content-type‘, ‘application/x-www-form-urlencoded‘);

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

    地址(接口):

        静态地址,如: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接口开放平台

标签:Web,请求,get,true,send,xhr,AJAX,new,open
From: https://blog.csdn.net/2401_86932795/article/details/141527857

相关文章

  • Web大学生网页作业成品——电影泰坦尼克号介绍网页设计与实现(HTML+CSS)(4个页面)
    ......
  • **为何HTTP请求方法如此重要?5个理由告诉你!**
    HTTP请求方法post向指定资源提交数据进行处理请求(例如提交表单或者上传文件)。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。get请求指定的页面信息,并返回实体主体。delete请求服务器删除指定的页面。put从客户端向服务器传送的数据......
  • SpringBoot文档之Web的阅读笔记
    Web基于SpringBoot框架开发应用,支持内嵌Tomcat/Jetty/Undertow/Netty来提供HTTP服务器。SpringBoot当前封装了如下组件:spring-boot-starter-webspring-boot-starter-webfluxServletWebServletWebApplications重要的注解:@Controller@RestController@RequestMa......
  • (javaweb)springboot的底层原理
    目录一.配置优先级二.Bean的管理1.获取bean​编辑​编辑2.bean作用域3.第三方bean三.SpringBoot原理 自动配置原理原理分析:conditional: 自动配置案例:(自定义starter分析)总结一.配置优先级//命令行参数的优先级最高二.Bean的管理1.获取bean注入ioc......
  • (javaweb)登录功能的校验与认证
    目录1.基础登录功能2.登录校验概述登录认证:1.会话技术2.三种会话技术的对比1.cookie2.Session3.令牌技术登录校验JWT令牌1.令牌介绍2.生成和校验3.登录后下发令牌过滤器filter快速入门详解(执行流程拦截路径过滤器链)过滤器链拦截器Interceptor 快速入门......
  • AJAX(4)——XMLHttpRequest
    XMLHttpRequest定义:XMLHttpRequest(XHR)对象用于与服务器交互。通过XMLHttpRequest可以在不刷新页面的情况下请求特定URL,获取数据。这允许网页在不影响用于操作的情况下,更新页面的局部内容。XMLHttpRequest在AJAX编程中被大量使用关系:axios内部采用XMLHttpRequest与服务器交......
  • WebRTC 实时通信:构建高效网页视频通话的秘诀
    标题:WebRTC实时通信:构建高效网页视频通话的秘诀WebRTC(WebReal-TimeCommunications),即网页实时通信技术,是一种支持浏览器间无需额外插件即可实现音视频实时通信的API。本文将深入探讨WebRTC的基本概念、关键技术,并通过示例代码展示如何在网页中实现实时视频通话功能,让您快......
  • Ruby Web服务开发:构建高效RESTful API的秘诀
    标题:RubyWeb服务开发:构建高效RESTfulAPI的秘诀Ruby作为一种灵活、高效的编程语言,通过其丰富的库和框架,为开发Web服务提供了强大的支持。本文将深入探讨如何在Ruby中开发Web服务,特别是RESTfulAPI。我们将从基础概念讲起,逐步深入到框架选择、路由配置、控制器编写、模型设......
  • 调用Web接口产生的invalid literal for int()错误
    错误产生调用新浪股票的按节点(如hs_a)获取股票总数接口,然后转换为整型,但是返回的是字符串,导致转换失败。报invalidliteralforint()withbase10:'"5349"'错误。出错代码如下:importrequestsdefget_stock_count(node='hs_a'):url=f'https://vip.stock.......
  • maven Tomcat插件安装 运行web项目 (3)
    1.maven工程目录结构main是用来写我们程序test是用来测试java是源程序resource是配置maven项目构建命令2.配置maven创建Maven工程这里的项目名称可以随便取进来后改成自己想要的jdk......