ajax

ajax: A:异步；J: javascript ；A :and ；X :XML；

前后端交互:❶ 前端发送请求❷ 后端接收请求;❸ 后端处理请求;❹ 后端返回响应; .❺ 前端处理后端的响应;

前端发送请求方式: form表单; 传统请求方式; . 会让页面跳转并刷新页面;

前端因为发现了这些问题，所以发明了一个 新的请求发送方式:ajax无刷新的页面请求发起方式;这个行为是有JS来执行的;让页面实现局部刷新;

ajax这个技术目标是在页面之中无刷新的发起请求，但是ajax技术实现不只有一种;

实现的方式有： xhr :称之为 小黄人;jsonp:用来处理跨域问题的;fetch :高级的xhr封装;

xhr发起请求


<button id="btn"> 发起xhr请求</ button><script>var btn = document . getElementById("btn");btn. onclick = function(){// xhr发请求共分成三个步骤:// -创建一个xhr对象;//浏览器提供给我们发起无刷新请求的工具;var xhr = new XMLHttpRequest();// -配置请求; //  -请求目标; //  -请求方式;//开启并配置xhr请求（请求方式，请求目标）xhr.open("GET ","./xhr.php");// -发送请求；//get没有请求体，直接调用sendAPI就可以了xhr.send();// xhr请求的响应接收//-异步;（JS执行的顺序，整个代码最后执行）//on :// readystate : xhr 的状态码;// change : 改变;xhr . onreadystatechange = function(){// xhr对象的状态码共郁5个;//记住4是成功// xhr. readyState里面取出的就是xhr的状态码;if( xhr.readyState === 4 ){//数据放在 xhr.responseText(响应文本)console.log( xhr.responseText );}}}
</script>

同路径下创建后台数据 xhr.php 文件

<?phpecho "hello 这是后端返回的数据";

不刷新页面能发送数据

xhr请求如何携带信息

<button id="btn"> 发起xhr请求</ button>
<script>// GET  :请求携带的信息是放在url地址栏里的;// POST :请求携带的信息是放在请求体之中的;var btn = document . getElementById("btn");btn. onclick = function(){var xhr = new XMLHttpRequest();//要使用GET请求发送方式并携带数据我们需要拼接一个 合适的URL;//数据和url使用 ? 分隔的;//数据 字段名  = 字段值 & 字段名2 = 字段值2 形式发送的;var url = "./xhr请求携带的信息.php?username=wuyanzu&password=123456" ;xhr. open("GET"，url );xhr . send();//此时后台返回下列图一图二接收响应:xhr. onreadystatechange = function(){if( xhr.readyState === 4 ){console.log( xhr . responseText);}}}
//此时后台返回下列图三</script>

与之匹配的后端创建 xhr请求携带的信息php文件

<?php//[ ]中内容 是 后端定义前端用什么携带信息的东西，叫字段
$username = $_GET["username"] ;
$password = $_GET["password"];echo "前端发送的信息是 : $username , $password";

查询结果是：

容易出现的问题：##在发起xhr请求时，为什么请求方式为GET，GET请求明明是获取数据，POST才是发送数据？-任何请求都可以携带参数，只不过携带参数的数量不同;-GET：GET请求可以携带的数据量较少;-POST：POST请求数据携带量不受限制;## xhr请求发送中为什么在没有【xhr对象状态码为4】的条件时，console. log( xhr. responseText ); 会执行两次?-这个事件在状态码改变的时候就会被触发，所以我们只判定在成功的时候去获取数据;否则会多次执行## xhr. send( )-请求发送的行为（规定）

ajax 与 xhr相关推荐

AJAX和XHR和Axios和Fetch
AJAX和XHR和Axios和Fetch 部分测试代码在gitee上地址:https://gitee.com/gaohan888/node-js-learning/tree/master/ajax ...
【笔记】跨域重定向中使用Ajax（XHR请求）导致跨域失败
背景: 1.前端Web中有两个域名,a.com和b.com,其中a.com是访问主站(页面),b.com是数据提交接口的服务器(XHR请求) 2.a.com中用XHR调用b.com/cerate[没有 ...
axios、ajax和xhr前端发送测试
其实axios和ajax都对原生的xhr进行了封装,个人感觉还是axios简洁.方便,尤大大都让我们转axios了,确实对于ajax好了不少,它支持了promise对象,支持js最新的规范.简单易用. ...
ajax beforesend xhr对象,jQuery中Ajax事件beforesend及各参数含义(示例代码)
转自:http://blog.sina.com.cn/s/blog_609f9fdd0100wprz.html Ajax会触发很多事件. 有两种事件,一种是局部事件,一种是全局事件: 局部事件:通过$ ...
ajax beforesend xhr对象,beforeSend XHR对象：遗漏的类型错误：无法读取的未定义的属性“的addEventList...
我不断收到此错误: 遗漏的类型错误:无法读取属性"的addEventListener"的不确定在哪里我想申请一个"进步"事件监听器为什么会出现这个错误? $( ...
ajax beforesend xhr对象,jq ajax之beforesend(XHR)
用于在向服务器发送请求前添加一些处理函数.例如:搜寻附近店铺,未搜寻出来的时候显示:正在搜寻中... 常见的一种效果,在用ajax请求时,没有返回前会出现前出现一个转动的loading小图标或者&qu ...
先定一个小目标，自己封装个ajax
你是否发现项目中有很多页面只用到了框架不到十分之一的内容,还引了压缩后还有70多kb的jquery库你是否发现项目中就用了两三个underscore提供的方法,其他大部分的你方法你甚至从来没有看过 ...
ajax如何请求json文件,简单的ajax请求加载外部json文件
我在学习ajax ....我试图从json文件发出一个基本请求,它与我的index.html位于同一个文件夹中,但由于某种原因它说未定义:(我可以看到错误是可变的人,但我不能赶上为什么它未定义.... ...
【AJAX】反向Ajax第1部分:Comet介绍
英文原文:Reverse Ajax, Part 1: Introduction to Comet 在过去的几年中,web开发已经发生了很大的变化.现如今,我们期望的是能够通过web快速.动态地访问应用 ...

ajax 与 xhr

文章目录

ajax

xhr发起请求

xhr请求如何携带信息

ajax 与 xhr相关推荐

最新文章

热门文章