首页 > 其他分享 >Ajax入门

Ajax入门

时间:2022-10-30 21:59:16浏览次数:36  
标签:XMLHttpRequest 入门 send 响应 Ajax xmlHttpRequest 方法 请求

简介

Ajax Asynchronous Javascript and XML,异步jsxml

XMLHttpRequestjs的一个外挂组件,用来实现客户端和服务端的异步通信,所有的ajax都要借助此组件才能成功。

XMLHttpRequest的使用

使用步骤

1,定义XMLHttpRequest实例对象
2,调用XMLHttpRequest对象的open方法,打开服务端URL的地址
3,注册onreadystatechange事件处理函数,准备接收响应并处理
4,调用XMLHttpRequest对象的send方法并发送数据

XMLHttpRequest的相关方法

var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.abort();//取消当前请求
xmlHttpRequest.getAllResponseHeaders();//获取全部的响应头
xmlHttpRequest.getResponseHeader("accept");//获取特定的响应头
xmlHttpRequest.open();//创建新的http请求,并指定请求的方法,url,验证消息(username,password)等。
xmlHttpRequest.send();//发送http请求到服务器,并接收相应的响应,
    在进行发送数据的时候,需要设置请求头:不设置客户端无法接收,不知道为声明
        xmlHttpRequest.setRequestHeader('Content-Type', "application/x-www-form-urlencoded");
xmlHttpRequest.setRequestHeader()//设置某个http头

XMLHttpRequest的相关属性

var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.onreadystatechange //指定当readyState属性改变时的处理方法
xmlHttpRequest.readyState //返回当前的请求属性
xmlHttpRequest.response 
xmlHttpRequest.responseText //将响应当中字符串
xmlHttpRequest.responseXML  //将响应当中XML document对象来处理
xmlHttpRequest.responseURL  
xmlHttpRequest.status //返回当前请求的http状态
xmlHttpRequest.statusText //返回当前请求的响应行状体

XMLHttpRequest的open方法

xmlHttpRequest.open(method: string, url: string, async: boolean, username?: string | null, password?: string | null)
    method:请求的方法
    url:请求的URL,可以时绝对地址,也可以位相对地址。
    async:可选,boolean类型,是否位异步类型,默认位true,当状体改变时会调用onreadystatechange属性指定的回调函数。
    username:
    password:
    之后就可以使用send方法发送数据了,如果不传递消息,可以把参数设置为null
    open方法中的async设置为true,send方法会立即返回,async设置为false时,直到请求完成或超时才send方法才会响应。

xmlHttpRequest.readyState属性值的含义

1,尚未初始化,表示已经new对象,但是并没有调用open方法                                                            
2,初始化完毕,但是尚未调用send方法                                                                       
3,数据传输中,已经接收部分数据,因为响应及http头不全,response的部分数据会出错                                             
4,接收数据完毕,此时通过可以通过response获取响应数据。                                                           
当我们使用ajax,当没有判断readyState的值是否为4时,可能无法获取到数据。因为js代码已经执行到了,但是数据并没有响应到。                        
已经完整的ajax响应,要具备 xmlHttpRequest.readyState == 4 并且 xmlHttpRequest.status==200               

中止请求

在使用abort()方法之前,应该先清除onreadystatechange事件处理函数。把函数设置为null

获取json数据

使用xmlHttpRequest.responseText获取数据后,使用eval()方法可以解析成js对象,再从该对象中解析出需要的值。

标签:XMLHttpRequest,入门,send,响应,Ajax,xmlHttpRequest,方法,请求
From: https://www.cnblogs.com/sinosecurity/p/16842334.html

相关文章

  • Javaweb基础知识复习------AJAX
    AJAX相关知识复习简而言之,就是可以用AJAX+HTML代替JSP页面,也可以进行异步交互,更关心部分界面Ajax案例后端代码就是一个servlet文件,前端页面的代码也不是很常用,可以在下......
  • Django开发入门
    安装pipinstalldjango构建项目django-adminstartprojectbysms说明manage.py是一个工具脚本,用作项目管理的。以后我们会使用它执行管理操作。里面的bysms/目录是pytho......
  • CMake系统学习1--安装与入门
    安装编译工具和依赖库sudoaptinstallg++gccmakeninja-buildunziplibssl-dev-y​​wget​​下载和编译​​cmake​​源码wgethttps://github.com/Kitware/CMake/r......
  • 性能测试的一些入门概念
    功能测试、自动化测试,性能测试区别功能测试在于找bug预期结果与实际结果进行比较自动化测试 模拟一个用户的操作来发现问题性能测试 不是模拟1个人,**模拟多个人同......
  • Java 从入门到放弃11 - 《Maven》
    说点题外话,没想到突然又重拾更新,在这期间学习了java的许多知识,还补充了sql语句,数据库相关的内容,由于时间关系,中间部分的内容都没有做相应笔记和博客,因为sql的语句还有中间......
  • OpenMP 入门
    OpenMP入门简介OpenMP一个非常易用的共享内存的并行编程框架,它提供了一些非常简单易用的API,让编程人员从复杂的并发编程当中释放出来,专注于具体功能的实现。openmp主......
  • R语言入门
    基础部分数据类型类型初始化语法略数值型(浮点型)numeric(4)1.5整数型integer(5)2复数型complex(2)1+2i逻辑型logical(4)True/False字符型......
  • 4.JWT入门案例
    JWT入门案例一、简介JSONWebtoken简称JWT,是用于对应用程序上的用户进行身份验证的标记。也就是说,使用JWTS的应用程序不再需要保存有关其用户的cookie或其他sess......
  • K8S入门篇-权限控制管理
    一、RBAC-基于角色的权限控制  范例1:聚合的权限 Aggregate创建一个clusterrolekind:ClusterRoleapiVersion:rbac.authorization.k8s.io/v1metadata:name:......
  • 如何在Ajax请求中后端进行跳转操作
    如果是ajax请求,想要后端传递跳转页面可以使用这个方法<?phpfunctiondemo(){$url=config('url').'/oauth2/authorize';if(Request::isAjax()){//如......