Ajax辨析
Ajax辨析
最近在多个知识点涉及到了ajax请求，各个知识有所交错，知识体系上学的有些混乱，这里梳理一下
单纯的发送Ajax请求
方式1： ajax传统4步骤
- ajax的post请求
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if(this.readyState == 4){
if(this.status == 200){
//执行代码
}else{
//执行代码
}
}
}
xhr.open("POST", "/ajax/ajaxRequest4", true)
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
xhr.send("username="+username.value+"")
- ajax的get请求
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if(this.readyState == 4){
if(this.status == 200){
//执行代码
}else{
//执行代码
}
}
}
xhr.open("GET", "/ajax/ajaxRequest4?" + "username="+username+"", true)
xhr.send()
方式2：自己封装的ajax请求
- 封装的代码
function jQuery(selector){
if(typeof selector == "string"){
if(selector.charAt(0) == "#"){
//原先的dom对象还要留着，因为最终的实现还要用这些对象的方法去实现，我们无法完成
domObj = document.getElementById(selector.substring(1))
//但是由于封装了新方法，所以原先的dom对象就暂时不能用了(调用不了我们自定义的方法)，要返回自定义的jQuery对象
return new jQuery()
}
}
if(typeof selector == "function"){
window.onload = selector
}
this.html = function(innerData){
domObj.innerHTML = innerData
}
this.click = function(fun){
domObj.onclick = fun
}
this.val = function(v){
if(v == undefined){
return domObj.value
}else{
domObj.value = v
}
}
this.change = function(fun){
domObj.onchange = fun
}
/**
* 有一些动态的数据不能写死
* 动态的信息有:
* 1. 请求的类型
* 2. 请求的地址
* 3. 是否异步
* 4. 提交的数据
*/
jQuery.ajax = function(jsonArgs) {
var method = jsonArgs.type.toUpperCase()
var xhr = new XMLHttpRequest()
//发送ajax请求，将文本框里的数据提交至后端
xhr.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status == 200) {
var jsonObj = JSON.parse(this.responseText)
jsonArgs.callBack(jsonObj)
} else {
alert("异常状态码: " + this.status)
}
}
}
if (method == "POST") {
xhr.open(method, jsonArgs.url, jsonArgs.async)
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
xhr.send(jsonArgs.data)
}
if (method == "GET") {
jsonArgs.data = "?" + jsonArgs.data
xhr.open(method, jsonArgs.url + jsonArgs.data, jsonArgs.async)
xhr.send()
}
}
}
$ = jQuery
new jQuery()
- 前端调用的代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>全面测试自定义jQuery类库</title>
<meta charset="UTF-8">
</head>
<body>
<script src="/ajax/js/jQuery-1.0.0.js"></script>
<script>
$(function(){
$("#btn").click(function (){
$.ajax({
type : "POST",
data : "username=" + $("#username").val(),
async : true,
url : "/ajax/ajaxRequest10",
callBack : function(json){
$("#the-div").html(json.name)
//自定义回调函数，个性化的处理后端返回的数据
}
})
})
})
</script>
<input type="text" id="username">
<input type="button" id="btn" value="点击回显数据">
<div id="the-div"></div>
</body>
</html>
方式3：用官方jQuery封装的ajax请求
//$.ajax()的参数:一个json数据
$.ajax({
async : true, // 默认为true，可以不写
contentType : "application/json", // 一个字符串，表示从浏览器发送给服务器的参数的类型，可以不写
data : {"name" : "xun", "age" : 21, "address" : "芜湖"}, // 可以是字符串，数组，json，表示请求的参数和参数值，常用json格式
dataType : "json", // 表示期望从服务器端返回的数据格式，可选的有：xml，html，text，json
error : function(){ // 表示当请求发生错误时，执行的函数
//请求出错时，执行的代码
},
success : function(data){ // 请求成功，从服务器端返回了数据，执行success函数
//data，就是responseText，是jQuery处理之后的数据
},
url : 请求的地址,
type : "get" 或者 "post" // 请求的方式，默认为get方式，不区分大小写
})
//常用:url, data, dataType, success
为了解决Ajax跨域请求问题
方式1：jsonp底层实现原理
//本质原理:通过自定义时机执行<script>标签，请求servlet
//创建script元素
var scriptElement = document.createElement("script")
//设置script元素属性
scriptElement.type = "text/javascript"
scriptElement.src = "http://localhost:8081/b/jsonp1?fun=sayHello"
//将script对象添加到body标签中(相当于完成了script标签的加载)
document.getElementsByTagName("body")[0].appendChild(scriptElement)
//后端返回数据时参照前端函数名返回,既完成了数据的返回，又可以在前端自定义的函数里对数据进行个性化操作
//这里还依赖一个原理：response.getWriter().writer("function" + (待返回数据填充进来))
//当把这个字符串返回给浏览器，浏览器得到:function(待返回数据)，会执行该函数。这为后端返回数据给前端指定函数，提供了必要支撑
方式2：官方jQuery库提供的jonp方式
$.ajax({
type : "GET",
url : "http://localhost:8081/b/jsonp1",
dataType : "jsonp" //
jsonp : "fun" //
jsonCallback : "sayHello" //
})
//dataType: "jsonp" 指定数据类型，从底层决定了，这次请求是一个类ajax请求，底层本质上不会使用XMLHttpRequest对象
//jsonp : "fun" 指定参数名，不设置的时候默认为"call back" ----> 指定第一层回调函数(主要用来作为入口,接受后端传来的json数据)
//jsonCallback : "sayHello" 指定回调函数的名字，不设置的时候，随即生成一个回调函数，且会调用success的回调函数----> 指定第二层回调函数(主要用于按照程序员需求处理后端传来的数据)
相比Ajax，为什么jsonp需要两层回调函数？
本质原因：jsonp不是ajax请求，没有用XMLHttpRequest，在真正的Ajax请求中，第一层回调函数被XMLHttpRequest.responseText替代，可以直接获取到后端传来的数据，只要显式的调用一次回调函数，将后端数据交给自定义的前端回调函数处理即可
但是在jsonp中享受不到XMLHttpRequest直接获取后端数据的便利，所以要在后端获取第一层回调函数，将后端数据传给前端，然后在该函数里，调用第二层回调函数，也就是我们自定义的函数或者是所谓的success函数，接收第一层回调函数转手后的数据，然后完成自定义操作
Ajax辨析的更多相关文章
- content-type常见类型辨析(以ajax与springmvc前后端交互为例)
博客搬家: content-type常见类型辨析(以ajax与springmvc前后端交互为例) 在http报文的首部中,有一个字段Content-type,表示请求体(entity body)中的数 ...
- JavaScript 函数节流和函数去抖应用场景辨析
概述 也是好久没更新 源码解读,看着房价蹭蹭暴涨,心里也是五味杂陈,对未来充满恐惧和迷茫 ...(敢问一句你们上岸了吗) 言归正传,今天要介绍的是 underscore 中两个重要的方法,函数节流和函 ...
- web也是区分前端与后端的，session\cookie辨析
<1>Ajax交互方式 Ext.Ajax.request( { //被用来向服务器发起请求默认的url url : "", //请求时发送后台的参数,既可以是Json对 ...
- AJAX基础知识点学�
1.AJAX(Asynchronous JavaScript and XML)即,异步JavaScript和XML 2.同步/异步差别 同步: ①每次进行整个页面的刷新 ②同步的链接在同一时间仅仅能有 ...
- AJAX基础知识点学习
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/huangyibin628/article/details/28281003 1.AJAX(Async ...
- jQuery之ajax实现篇
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...
- Ajax及跨域
概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...
- 一个粗心的Bug，JSON格式不规范导致AJAX错误
一.事件回放 今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里. 当时正在联调一个项目,由于后端没有提供数据接口,于是我直接本地建立了一个 json ...
- ABP文档 - Javascript Api - AJAX
本节内容: AJAX操作相关问题 ABP的方式 AJAX 返回信息 处理错误 HTTP 状态码 WrapResult和DontWrapResult特性 Asp.net Mvc 控制器 Asp.net ...
随机推荐
- RabbitMQ 3.9( 基础 )
1.认识MQ 1.1.什么是MQ? MQ全称:message queue 即 消息队列 这个队列遵循的原则:FIFO 即 先进先出 队列里面存的就是message 1.2.为什么要用MQ? 1.2.1 ...
- QY-19 GNSS位移监测站 地质灾害在线监测-实时预警
概述 GNSS的全称是全球导航卫星系统(Global Navigation Satellite System),它是泛指所有的卫星导航系统,包括全球的.区域的和增强的,如美国的GPS.俄罗斯的Glon ...
- 基于 range 的 for 循环和 auto
基于 range 的 for 循环和 auto C++11 引入一种循环的新形式,叫基于 range 的 for 循环,它允许我们用更简单易读的形式遍历容器中的所有元素 vector<int&g ...
- Centos 7以上安装Docker （亲测有效）
一.安装前的准备 我的环境是VMware15虚拟机安装的Centos7,Linux内核是3.10.0-1062.4.1.e17.x86_64 1. 用root账户登录查看操作系统内核版本及相关信息 [ ...
- Python的.gitignore模板
参考:https://github.com/github/gitignore Python的.gitignore模板,记录一下方便查询 # Byte-compiled / optimized / DL ...
- 安装Sonarqube到CentOS（YUM）
SonarQube 是一个用于代码质量管理的开源平台,用于管理源代码的质量. 通过插件形式,可以支持包括 java, C#, C/C++, PL/SQL, Cobol, JavaScrip, Groo ...
- 基于SqlSugar的开发框架循序渐进介绍（6）-- 在基类接口中注入用户身份信息接口
在基于SqlSugar的开发框架中,我们设计了一些系统服务层的基类,在基类中会有很多涉及到相关的数据处理操作的,如果需要跟踪具体是那个用户进行操作的,那么就需要获得当前用户的身份信息,包括在Web A ...
- ARC126F
[ARC126F] Affine Sort 给定一个长为 \(N\) 的序列 \(x\) ,定义 \(f(K)\) 表示满足下述条件的 \((a,b,c)\) 个数: \(1\le c\le K,0\ ...
- python+selenium 自动化测试——显式等待详解
1.前言 之前有提到过等待函数,等待函数分为:强制等待(sleep).隐式等待(implicitly_wait),显示等待(WebDriverWait),这次以显示等待方式专门做一次总结,因为我个人是 ...
- 2021.05.03【NOIP提高B组】模拟 总结
比较水的一场比赛,却不能 AK T1 有 \(n\) 次,每次给 \(A_i,B_i\) 问以 \(i\) 结尾的 \(A,B\) 的匹配中最大和的最小值 问最大和的最小值,却不用二分. 如果暴力排序 ...