Ajax和跨域问题深入解析_AJAX相关
这篇文章主要为大家详细介绍了Ajax和跨域问题，告诉大家什么Ajax，什么是跨域？具有一定的参考价值，对感兴趣的小伙伴们可以参考一下
什么是ajax
Ajax(Asynchronous JavaScript and XML),是一种可以向服务器请求额外的数据并且无需刷新页面的技术,ajax的出现带来了更好的用户体验.
Ajax的核心就是XMLHttpRequest(XHR)对象.XHR为向服务器发送请求和解析服务器响应提供了流畅的接口.可以使用XHR对象获取新数据,通过DOM将新数据插入到页面.虽然名字中包含XML,但是ajax通信和数据格式无关;这种技术就是可以不用刷新就从服务器获取数据,但是不一定是XML数据,也可以是json.
XMLHttpRequest对象
XHR的用法
1.创建一个XMLHttpRequest对象
2.发送请求
1）.设置请求行 xhr.open()
2）.POST请求需要设置请求头 xhr.setRequestHeader() POST请求头Content-Type的值: application/x-www-form-urlencoded
3）.设置请求体 xhr.send() get请求传null,post根据情况
3.处理服务器响应
先判断响应状态码和异步对象是否解析完毕.
服务器返回的状态码 status
1xx:消息
2xx:成功
3xx:重定向
4xx:请求错误
5xx:服务器错误
异步对象的状态码 readystate
0:异步对象已经创建
1:异步对象初始化完成,发送请求
2:接收服务器返回的原始数据
3:数据正在解析,解析需要时间
4:数据解析完成,数据可以使用了
XML
XML的特点，出身名门，W3C制定，微软和IBM曾经共同大力推荐过的数据格式.XML 指可扩展标记语言（Extensible Markup Language）,被设计用来传输和存储数据,HTML 是设计用来表示页面的.
语法规则:和HTML差不多,都是通过标记来表示的
特殊符号:比如<>要使用实体-转移字符
xml的解析需要前后台配合:
1.后台在返回的时候,在响应头中设置Content-Type的值为 application/xml
2.前台异步对象在接收后台数据时,记得按照xml的方式来接收,xhr.responseXML,并且它返回的是一个object对象,内容是#document
JSON
JSON(JavaScript Object Notation),出身草根，是 Javascript 的子集，专门负责描述数据格式.JSON本身是一个特殊格式的字符串,可以转换成js对象,是网络上用来传输数据使用最广泛的数据格式，没有之一.
语法规则:数据以 key/value 值对表示,数据由逗号分隔,大括号保存对象,中括号保存数组,名称和值都需要使用双引号包含(这个是和js的一点小区别).
js中解析/操作JSON:
1.JSON.parse(json字符串); 将一个json格式的字符串解析成js对象
2.JSON.stringify(js对象); 将一个js对象转成一个json格式的字符串
自己封装一个ajax
function pinjieData(obj) {
//obj 就相当于 {key:value,key:value}
//最终拼接成键值对的字符串 "key:value,key:value"
var finalData = "";
for(key in obj){
finalData+=key+"="+obj[key]+"&"; //key:value,key:value&
}
return finalData.slice(0,-1);//key:value,key:value
}
function ajax(obj) {
var url = obj.url;
var method = obj.method.toLowerCase();
var success = obj.success;
var finalData = pinjieData(obj.data);
//finalData最终的效果key:value,key:value
//1.创建xhr对象
var xhr = new XMLHttpRequest();
//get方法拼接地址,xhr.send(null)
if (method=='get'){
url = url + "?"+finalData;
finalData = null;
}
//2.设置请求行
xhr.open(method,url);
// 如果是post请求,要设置请求头
if (method=='post'){
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
}
//3.发送
xhr.send(finalData);
//4.监听服务器返回的数据
xhr.onreadystatechange = function () {
if (xhr.status==200 && xhr.readyState==4){
var result = null;
//获取返回的数据类型
var rType = xhr.getResponseHeader("Content-Type");
if (rType.indexOf('xml')!=-1){
result = xhr.responseXML;
}else if(rType.indexOf('json')!=-1){
// JSON.parse 的意思是 将 json格式的字符串
//比如 [{ "src":"./images/nav0.png","content":"商品分类1"}]
//转成js对象
result = JSON.parse(xhr.responseText);
}else{//当成普通的字符串去处理
result = xhr.responseText;
}
//将这里解析好的数据交给页面去渲染
success(result);
}
}
}jQuery中使用ajaxAPI jQuery ajax
jQuery为我们提供了更便利的ajax封装使用.
$.ajax({}) 可以配置方式发起ajax请求
$.get() 以get方式发起ajax请求
$.post() 以post方式发起ajax请求
$('form').serialize() 序列化表单(格式化key=val$key=val)
参数说明
url :接口地址
type :请求方式(get/post)
timeout : 要求为Number类型的参数，设置请求超时时间（毫秒）
dataType: 应该是客户端传递给服务器一个值，告诉服务器如何进行处理:
data: 发送请求数据
beforeSend: 要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求.
success: 成功响应后调用
error: 错误响应时调用
complete: 响应完成时调用（包括成功和失败）
//ajax===get
$.ajax({
url:'',
data:'key=value&key=value',
type:'get',
success:function (result) {
console.log(result);
}
});
//ajax===post
$.ajax({
url:'',
data:'key=value&key=value',
type:'post',
success:function (result) {
console.log(result);
}
});
//$.get
$.get({
url:'',
data:'key=value&key=value',
success:function (result) {
console.log(result);
}
});
//$.post
$.post({
url:'',
data:'key=value&key=value',
success:function (result) {
console.log(result);
}
});
//在使用jQuery中ajax发送请求的时候,只需要在 dataType中写上jsonp即可实现ajax的跨域请求
dataType:'jsonp'跨域
通过XHR实现ajax通信的一个主要限制(相同域,相同端口,相同协议),来源于跨服安全策略,默认情况下,XHR只能请求同一域的资源,这是为了防止某些恶意的行为.
CORS跨域
CORS(cross-origin resource sharing,跨域源资源共享)定义了在跨域时,浏览器和服务器应该如何沟通.CORS允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。
CORS支持所有类型的HTTP请求.
服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。
JSONP
JSONP由回调函数和数据组成.JSONP只支持GET请求.JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据.
JSONP通过动态
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
Oracle错误3114详解：如何快速解决
Mar 08, 2024 pm 02:42 PM
Oracle错误3114详解：如何快速解决，需要具体代码示例在Oracle数据库开发和管理过程中，我们常常会遇到各种各样的错误，其中错误3114是比较常见的一个问题。错误3114通常表示数据库连接出现问题，可能是由于网络故障、数据库服务停止、或者连接字符串设置不正确等原因导致的。本文将详细解释错误3114的产生原因，以及如何快速解决这个问题，并附上具体的代码
解析Wormhole NTT：适用于任何Token的开放框架
Mar 05, 2024 pm 12:46 PM
Wormhole在区块链互操作性方面处于领先地位，专注于创建有弹性、面向未来的去中心化系统，优先考虑所有权、控制权和无需许可的创新。这一愿景的基础是对技术专业知识、道德原则和社区一致性的承诺，旨在以简单、清晰和广泛的多链解决方案套件重新定义互操作性格局。随着零知识证明、扩容方案和功能丰富的Token标准的兴起，区块链变得更加强大，而互操作性也变得越来越重要。在这个不断创新的应用程序环境中，新颖的治理系统和实用功能为整个网络的资产带来了前所未有的机会。协议构建者现在正在努力思考如何在这个新兴的多链
PHP 与 Ajax：构建一个自动完成建议引擎
Jun 02, 2024 pm 08:39 PM
使用PHP和Ajax构建自动完成建议引擎：服务器端脚本：处理Ajax请求并返回建议(autocomplete.php)。客户端脚本：发送Ajax请求并显示建议(autocomplete.js)。实战案例：在HTML页面中包含脚本并指定search-input元素标识符。
PHP 中点的含义和用法解析
Mar 27, 2024 pm 08:57 PM
【PHP中点的含义和用法解析】在PHP中，中点（.）是一个常用的操作符，用于连接两个字符串或者对象的属性或方法。在本文中，我们将深入探讨PHP中点的含义和用法，并通过具体的代码示例加以说明。1.连接字符串中点操作符.在PHP中最常见的用法是连接两个字符串。通过将.放置在两个字符串之间，可以将它们拼接在一起，形成一个新的字符串。$string1=&qu
如何解决jQuery AJAX报错403的问题？
Feb 23, 2024 pm 04:27 PM
如何解决jQueryAJAX报错403的问题？在开发网页应用程序时，经常会使用jQuery来发送异步请求。然而，有时候在使用jQueryAJAX时可能会遇到错误代码403，表示服务器禁止访问。这种情况通常是由服务器端的安全设置所导致的，但可以通过一些方法来解决这个问题。本文将介绍如何解决jQueryAJAX报错403的问题，并提供具体的代码示例。一、使
如何使用Ajax从PHP方法中获取变量？
Mar 09, 2024 pm 05:36 PM
使用Ajax从PHP方法中获取变量是Web开发中常见的场景，通过Ajax可以实现页面无需刷新即可动态获取数据。在本文中，将介绍如何使用Ajax从PHP方法中获取变量，并提供具体的代码示例。首先，我们需要编写一个PHP文件来处理Ajax请求，并返回所需的变量。下面是一个简单的PHP文件getData.php的示例代码：
Win11新功能解析：跳过登录微软账户的方法
Mar 27, 2024 pm 05:24 PM
Win11新功能解析：跳过登录微软账户的方法随着Windows11的发布，许多用户发现其带来了更多的便捷和新功能。然而，有些用户可能不喜欢将其系统与微软账户绑定，希望跳过这一步骤。本文将介绍一些方法，帮助用户在Windows11中跳过登录微软账户，实现更加私密和自主的使用体验。首先，我们来了解一下为什么有些用户不愿意登录微软账户。一方面，一些用户担心他们
Apache2无法正确解析PHP文件的处理方法
Mar 08, 2024 am 11:09 AM
由于篇幅限制，以下是一个简短的文章：Apache2是一种常用的Web服务器软件，而PHP是一种广泛使用的服务器端脚本语言。在搭建网站过程中，有时会遇到Apache2无法正确解析PHP文件的问题，导致PHP代码无法执行。这种问题通常是因为Apache2没有正确配置PHP模块，或者PHP模块与Apache2的版本不兼容导致的。解决这个问题的方法一般有两种，一种是
