ajax 后面接什么,什么是AJAX?
这里是修真院前端小课堂,每篇分享文从
八个方面深度解析前端知识/技能,本篇分享的是:
【什么是AJAX?】
1:背景介绍
首先,speak with me, 诶债克斯,别读成阿贾克斯了哦~。
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
2.知识解析:
Ajax就是用 JS 发起一个请求,并得到服务器返回的内容。这跟以前的技术最大的不同点在于「页面没有刷新」,改善了用户体验,仅此而已。
那么我们如何发送一个ajax请求呢?
创建一个对象 XMLHttpRequest
var xhr = new XMLHttpRequest();为了支持ie6以及更早的版本,要 var xhr=new ActiveXObject()
2.监听请求成功后的状态变化
3.设置请求参数
4.发起请求
5.操作DOM,实现动态局部刷新
而什么是一个完整的HTTP请求呢?
接下来,我们就要监听请求成功的状态变化了
onreadystatechange:用来监听readyState的变化的
readyState:表示当前请求的后台的状态
status:表示处理的结果
其中readyState:表示当前请求的后台的状态
0:请求未初始化(还没有调用open())
1:请求已经建立,但是还没有发送(还没有调用send())
2:请求已经发送,正在处理中
3:请求正在处理中,通常响应中已经有部分数据可以用了
4:响应已经完成,可以获取并使用服务器的响应了
而status:表示处理的结果(状态码)
1XX,表示收到请求正在处理中
status == 200 是表示处理的结果是OK的
状态码:200到300是指服务端正常返回
304:如果网页自请求者上次请求后再也没有更改过,应将服务器配置为返回此响应,进而节省带宽和开销
404:找不到对象(404 not found)
503:服务器超时
设置请求参数
xhr对象接受三个参数
1:表示请求类型
2:表示请求的网址
3:表示是否异步
get/post/put/delete
Get和post方法的区别:
get是获取数据,get的send方法的参数可以是null或者空,对发送信息有限制,一般在2000个字符,一般是用来查询(幂等)
post可以发送数据,但是在使用post方法发送数据,需要使用setRequestHeader()来添加HTTP头,同时,post的send()方法需要写入要发送的数据的值, 一般用于修改服务器上的资源,对信息数量无限制,也更安全
3常见问题
使用post提交需要忘记content-type的问题
4.解决方案
xhr.open(“post”, “/carrots-admin-ajax/a/login”,true);
xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
xhr.send(“name=” + name + “&pwd=” + code);
Content-type要作为请求头放在open和send之间
5.编码实战
var xhr = new XMLHttpRequest();
function ip() {
var name = $("#name").val();
var code = $("#code").val();
// 指定通信过程中状态改变时的回调函数
xhr.open(“post”, “/carrots-admin-ajax/a/login”,true);
xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
xhr.send(“name=” + name + “&pwd=” + code);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
if (JSON.parse(xhr.responseText).code >= 0) {
window.location.href = "http://dev.admin.carrots.ptteng.com/";
} else {
$(".alert").html("该用户不存在或密码不正确");
}
}
}
};
}
$(function () {
$("#summit").click(function () {
var name = $("#name").val();
var code = $("#pwd").val();
$.ajax({
type: “POST”,
url: “/carrots-admin-ajax/a/login”,
data: {
“name”: name,
“pwd”: code
},
// beforeSend: function(xhr){xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);},
datatype:“json”,
success: function (data) {
console.log(data);
if (JSON.parse(data).code==0) {
alert(JSON.parse(data).message);
}
else {
alert(JSON.parse(data).message)
}
}
})
})
});
6扩展思考
Ajax有什么优点和缺点?
Ajax就是用 JS 发起一个请求,并得到服务器返回的内容。这跟以前的技术最大的不同点在于「页面没有刷新」,改善了用户体验,仅此而已。
参考文献
jqury ajax方法
菜鸟教程
更多讨论
请求体是什么?
请求体将一个页面表单中的组件值通过param1=value1¶m2=value2的键值对形式编码成一个格式化串,它承载多个请求参数的数据。不但报文体可以传递请求参数,请求URL也可以通过类似于“/chapter15/user.html? param1=value1¶m2=value2”的方式传递请求参数。
2.xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
application/x-www-form-urlencoded代表什么意思?
form的enctype属性为编码方式,常用有两种:application/x-www-form-urlencoded和multipart/form-data,默认为application/x-www-form-urlencoded。
x-www-form-urlencoded
当action为get时候,浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串(name1=value1&name2=value2…),然后把这个字串append到url后面,用?分割,加载这个新的url。
3.jQuery如何设置接受的数据类型?
使用datatype:“json”,里面写自己想要接受的数据类型
标签:www,name,form,什么,xhr,AJAX,urlencoded,请求
来源: https://blog.csdn.net/learning_web/article/details/98725007
ajax 后面接什么,什么是AJAX?相关推荐
- ajax提交相对路径报错,ajax提交请求为啥url要用这个函数encodeURI
参考如下: 如果你是通过form提交的,那就不需要用这个了.但是如果是你使用url的方式 例如:ajax提交到后台的,就需要对url进行encodeURI编码, 否则,会导致后台出现各种乱码,不加en ...
- php ajax session失效,PHP中解决ajax请求session过期退出登录问题
1.session过期,如果直接是url请求,或者用户在打开的系统页面中直接清除缓存及cookie信息,可直接在php的入口文件中调用以下封装的方法,进行session信息判断以及页面的跳转,如: i ...
- AJAX培训第二讲:使用AJAX框架(上)
点击这里下载PDF文件. 点击这里下载示例文件. 点击这里下载视频文件. 相关内容:AJAX培训第二讲:使用AJAX框架(下) 首先向大家说声抱歉,离上次隔的时间实在太长.由于一度工作比较忙,所以录制 ...
- ajax+php+jq+面向对象,php+jquery+ajax+json的一个最简单实例
html页面: $(function(){ $("#send").click(function(){ var cont = $("input").seriali ...
- 初学 ASP.NET AJAX (一):构建 ASP.NET AJAX 开发环境
1 概述 Microsoft ASP.NET AJAX 是 Microsoft 公司对 Ajax 技术的完美封装.它能使你已快速的创建包含丰富用户体验的用户界面的 Web 页面,提供加入了跨浏览器的 ...
- Django,Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传
JSON JSON指的是JavaScript对象方法(JavaScript Object Notation) JSON是轻量级的文本数据交换格式 JSON独立于语言 JSON具有自我i描述,更易理解 ...
- ASP.NET AJAX文档-ASP.NET AJAX 概述[翻译](1)
本文翻译自官方文档,小弟是第一次翻译,若有不妥之处,请大家指出. ASP.NET AJAX 概述 介绍 微软的ASP.NET AJAX能让你快速的创建web页面,这些页面包括一个能快速响应的富用户体验 ...
- wcf简单教程(10) ajax调用,wcf简单教程(10) ajax调用
wcf简单教程(10) ajax调用 [2021-02-11 16:23:59] 简介: php去除nbsp的方法:首先创建一个PHP代码示例文件:然后通过"preg_replace(&q ...
- $.ajax 发送请求,JavaScript之Ajax-2 Ajax(使用Ajax发送get请求、使用Ajax发送post请求)
一.使用Ajax发送get请求 发送异步请求的步骤 - 获取Ajax对象:获取 XMLHttpRequest对象实例 - 创建请求:调用XMLHTTPRequest对象的open方法 - 设置回调函数 ...
- ajax联系人数,setInterval定时调用ajax实现在线人数统计
index页面把onLineCount.jsp给include进来,onLineCount.jsp每隔一段时间刷新一次从数据库中统计数据,很显然这个方法非常的错误,onLineCount.jsp每次刷 ...
最新文章
- jq 直接调用php文件_PHP的函数类别和变量命名
- 学Python很久只学了皮毛?
- cocos v3.10 下载地址
- 紫书 习题 10-44 UVa 11246 ( 容斥原理)
- Python语言pip升级python-augeas失败之解决办法
- 开源数据库中间件-MyCa初探与分片实践
- Bash脚本教程之脚本除错
- c语言warning scanf,【C】将m~n之间的素数输出与VS2005以上版本对C语言的scanf的警告warning C4996...
- leetcode939.MinimumAreaRectangle
- matlab实验shi,matlab 实验六 古典密码与破译
- 如何把滑动条变好看一点
- 射频电路学习之Smith圆图
- 3D游戏编程4--打飞碟
- 微信小程序——调查问卷案例
- adprw指令通讯案例_S71200 ModbusTCP 通讯配置向导说明
- 天津等保测评机构项目测评收费价格标准参考
- 改文件777的php,服务器文件目录权限777修改方法
- 一行代码教你撩妹手到擒来❤html+css+js烟花告白3D相册(含音乐+可自定义文字)520表白/七夕情人节/求婚
- 计算机怎样禁用中等加密算法,限制加密算法和协议 - Windows Server | Microsoft Docs...
- 原创 | GIS国产化除了软件还有什么
热门文章
- Chrome断点JS寻找淘宝签名sign
- vscode自动补全c语言_vscode代码自动补全失效
- 计算机CPU的时钟频率主要,cpu时钟频率计算公式_CPU频率计算方法详解
- Android Studio报错Using insecure protocols with repositories
- 计算机桌面来回闪烁,Windows10系统电脑屏幕一直闪烁的解决方案
- 哈利波特信息站web网页课设报告(html+css)
- JDBC 和数据库连接池
- python字符串转负数_python 字符串 步进 负数
- 如何选择和更换阿里云服务器操作系统?
- 从苹果封杀Epic与特斯拉硬刚拼多多看新时代的渠道产品战