이번에는 Ajax 크로스 도메인 문제에 대해 자세히 소개하겠습니다. Ajax 크로스 도메인 문제 사용 시 주의사항은 무엇인가요?
ajax란
Ajax(Asynchronous JavaScript 및 XML)는 페이지를 새로 고치지 않고도 서버에 추가 데이터를 요청할 수 있는 기술입니다. ajax의 등장으로 더 나은 사용자 경험이 제공됩니다.
Ajax는 XMLHttpRequest(XHR) 개체입니다. XHR은 서버에 요청을 보내고 서버 응답을 구문 분석하기 위한 원활한 인터페이스를 제공합니다. 이름에는 DOM을 통해 새 데이터를 가져오고 페이지에 삽입할 수 있습니다. XML, Ajax 통신은 데이터 형식과 관련이 없습니다. 이 기술은 새로 고치지 않고 서버에서 데이터를 얻을 수 있지만 반드시 XML 데이터는 아니며 json일 수도 있습니다.
XMLHttpRequest 객체
사용. XMLHttpRequest 객체를 생성합니다2. 요청 보내기
1).요청 라인 설정 xhr.open()
2).POST request
요청 헤더를 설정해야 합니다. xhr.setRequestHeader() POST의 값 요청 헤더 Content-Type: application/x-www-form-urlencoded3) get 요청에서 null을 전달하도록 요청 본문 xhr.send()를 설정하고 상황에 따라 게시합니다
3.
먼저 응답 상태 코드와 비동기 개체가 구문 분석되었는지 확인합니다.
서버에서 반환된 상태 코드 상태
1xx: 메시지2xx: 성공
3xx: 리디렉션4xx: 요청 오류 5xx: 서버 오류
비동기 객체 Readystate의 상태 코드
0: 비동기 객체가 생성되었습니다.
2: 서버에서 반환된 원본 데이터를 받습니다.
3: 데이터는4: 데이터 파싱이 완료되어 데이터를 사용할 수 있습니다.
XML
XML의 특징은 고유한 계열에서 왔으며 W3C에서 공식화한 데이터 형식으로, Microsoft와 IBM에서 강력히 권장하는 XML은 데이터를 전송하고 저장하도록 설계된 Extensible Markup Language이며, HTML은 페이지를 표현하도록 설계되었습니다. 문법 규칙: HTML과 유사하게 태그를 통해 표현됩니다.
특수 기호: 예를 들어 <>는 엔터티 전송 문자를 사용해야 합니다.
xml 구문 분석에는 프런트엔드 및 백엔드 협력이 필요합니다.
1 백엔드가 반환되면 Content-Type 값을 설정합니다. application/xml2에 대한 응답 헤더에서 프런트 엔드 비동기 객체가 배경 데이터를 수신할 때 이를 xml, xhr.responseXML 형식으로 수신하고
객체 객체, 콘텐츠를 반환한다는 것을 기억하세요. #document
JSON
JSON(JavaScript Object Notation)은 Javascript의 하위 집합이며 데이터 형식을 설명하는 역할을 합니다. JSON 자체는 js 개체로 변환할 수 있는 특수 형식의 문자열입니다.
문법 규칙:
데이터는 키/값 쌍으로 표시되고, 데이터는 쉼표로 구분되며, 중괄호는 개체를 저장하고, 대괄호는 네트워크입니다. 저장 배열, 이름 및 값은 큰따옴표로 묶어야 합니다(js와 약간의 차이가 있음). js에서 JSON을 구문 분석/조작:
1.JSON.parse(json string); 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);
}
}
}API jQuery ajax
jQuery는 더 편리한 ajax 캡슐화 사용을 제공합니다.$.ajax({})는 ajax 요청을 시작하도록 구성할 수 있습니다
$.get() get 모드에서 ajax 요청 시작$.post() 포스트 모드에서 ajax 요청 시작
$ ('form').serialize() 양식 직렬화(형식 키=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通过动态
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
