Ajax 도메인 간 문제에 대한 자세한 소개-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Ajax 도메인 간 문제에 대한 자세한 소개

php中世界最好的语言

Apr 02, 2018 am 09:25 AM

ajax 소개하다

이번에는 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-urlencoded

3) get 요청에서 null을 전달하도록 요청 본문 xhr.send()를 설정하고 상황에 따라 게시합니다
3.
먼저 응답 상태 코드와 비동기 개체가 구문 분석되었는지 확인합니다.

서버에서 반환된 상태 코드 상태

1xx: 메시지

2xx: 성공

3xx: 리디렉션

4xx: 요청 오류 5xx: 서버 오류

비동기 객체 Readystate의 상태 코드
0: 비동기 객체가 생성되었습니다.

1: 비동기 객체 초기화가 완료되고 요청이 전송됩니다.

2: 서버에서 반환된 원본 데이터를 받습니다.

3: 데이터는

4: 데이터 파싱이 완료되어 데이터를 사용할 수 있습니다.

XML

XML의 특징은 고유한 계열에서 왔으며 W3C에서 공식화한 데이터 형식으로, Microsoft와 IBM에서 강력히 권장하는 XML은 데이터를 전송하고 저장하도록 설계된 Extensible Markup Language이며, HTML은 페이지를 표현하도록 설계되었습니다. 문법 규칙: HTML과 유사하게 태그를 통해 표현됩니다.

특수 기호: 예를 들어 <>는 엔터티 전송 문자를 사용해야 합니다.

xml 구문 분석에는 프런트엔드 및 백엔드 협력이 필요합니다.

1 백엔드가 반환되면 Content-Type 값을 설정합니다. application/xml

2에 대한 응답 헤더에서 프런트 엔드 비동기 객체가 배경 데이터를 수신할 때 이를 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);
  }
 }
}

로그인 후 복사

jQuery에서 ajax 사용

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通过动态

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7536

Cakephp 튜토리얼

1379

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

jQuery AJAX 요청에서 발생한 403 오류를 해결하는 방법 Feb 20, 2024 am 10:07 AM

제목: jQuery AJAX 요청의 403 오류를 해결하는 방법 및 코드 예제 403 오류는 서버가 리소스에 대한 액세스를 금지하는 요청을 의미합니다. 이 오류는 일반적으로 요청에 권한이 없거나 서버에서 거부되기 때문에 발생합니다. jQueryAJAX 요청을 할 때 가끔 이런 상황이 발생합니다. 이 기사에서는 이 문제를 해결하는 방법을 소개하고 코드 예제를 제공합니다. 해결 방법: 권한 확인: 먼저 요청한 URL 주소가 올바른지 확인하고 리소스에 액세스할 수 있는 충분한 권한이 있는지 확인하십시오.

jQuery AJAX 요청 403 오류를 해결하는 방법 Feb 19, 2024 pm 05:55 PM

jQuery는 클라이언트 측 개발을 단순화하는 데 사용되는 인기 있는 JavaScript 라이브러리입니다. AJAX는 전체 웹 페이지를 다시 로드하지 않고 비동기 요청을 보내고 서버와 상호 작용하는 기술입니다. 그러나 jQuery를 사용하여 AJAX 요청을 할 때 가끔 403 오류가 발생합니다. 403 오류는 일반적으로 보안 정책이나 권한 문제로 인해 서버 거부 액세스 오류입니다. 이 기사에서는 403 오류가 발생한 jQueryAJAX 요청을 해결하는 방법에 대해 설명합니다.

PyCharm 초보자 가이드: 대체 함수에 대한 종합 분석 Feb 25, 2024 am 11:15 AM

PyCharm은 개발 효율성을 크게 향상시킬 수 있는 풍부한 기능과 도구를 갖춘 강력한 Python 통합 개발 환경입니다. 그 중 교체 기능은 개발 과정에서 자주 사용되는 기능 중 하나로, 개발자가 코드를 빠르게 수정하고 코드 품질을 향상시키는 데 도움을 줄 수 있습니다. 이 기사에서는 초보자가 이 기능을 더 잘 익히고 사용할 수 있도록 특정 코드 예제와 함께 PyCharm의 대체 기능을 자세히 소개합니다. 대체 기능 소개 PyCharm의 대체 기능은 개발자가 코드에서 지정된 텍스트를 빠르게 대체하는 데 도움이 될 수 있습니다.

jQuery AJAX 오류 403 문제를 해결하는 방법은 무엇입니까? Feb 23, 2024 pm 04:27 PM

jQueryAJAX 오류 403 문제를 해결하는 방법은 무엇입니까? 웹 애플리케이션을 개발할 때 jQuery는 종종 비동기 요청을 보내는 데 사용됩니다. 그러나 때때로 jQueryAJAX를 사용할 때 서버에서 액세스가 금지되었음을 나타내는 오류 코드 403이 발생할 수 있습니다. 이는 일반적으로 서버 측 보안 설정으로 인해 발생하지만 문제를 해결하는 방법이 있습니다. 이 기사에서는 jQueryAJAX 오류 403 문제를 해결하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. 만들다

PHP 및 Ajax: 자동 완성 제안 엔진 구축 Jun 02, 2024 pm 08:39 PM

PHP 및 Ajax를 사용하여 자동 완성 제안 엔진 구축: 서버측 스크립트: Ajax 요청을 처리하고 제안을 반환합니다(autocomplete.php). 클라이언트 스크립트: Ajax 요청을 보내고 제안을 표시합니다(autocomplete.js). 실제 사례: HTML 페이지에 스크립트를 포함하고 검색 입력 요소 식별자를 지정합니다.

Ajax를 사용하여 PHP 메소드에서 변수를 얻는 방법은 무엇입니까? Mar 09, 2024 pm 05:36 PM

Ajax를 사용하여 PHP 메소드에서 변수를 얻는 것은 웹 개발의 일반적인 시나리오입니다. Ajax를 통해 데이터를 새로 고치지 않고도 페이지를 동적으로 얻을 수 있습니다. 이 기사에서는 Ajax를 사용하여 PHP 메소드에서 변수를 가져오는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 Ajax 요청을 처리하고 필요한 변수를 반환하기 위해 PHP 파일을 작성해야 합니다. 다음은 간단한 PHP 파일 getData.php에 대한 샘플 코드입니다.

도지코인이란 무엇인가요? Apr 01, 2024 pm 04:46 PM

Dogecoin은 고정된 공급 한도가 없고, 빠른 거래 시간, 낮은 거래 수수료, 대규모 밈 커뮤니티가 있는 인터넷 밈을 기반으로 만들어진 암호화폐입니다. 용도로는 소액 거래, 팁, 자선 기부 등이 있습니다. 그러나 무제한 공급, 시장 변동성, 조크 코인으로서의 지위 역시 위험과 우려를 불러일으킵니다. 도지코인이란 무엇입니까? Dogecoin은 인터넷 밈과 농담을 기반으로 만들어진 암호화폐입니다. 기원과 역사: Dogecoin은 2013년 12월 두 명의 소프트웨어 엔지니어 Billy Markus와 Jackson Palmer에 의해 만들어졌습니다. 당시 인기 있었던 "Doge" 밈에서 영감을 받아, 영어가 서툰 시바견이 등장하는 코믹한 사진입니다. 특징 및 이점: 무제한 공급: 비트코인과 같은 다른 암호화폐와는 달리

Samsung S24ai 기능에 대한 자세한 소개 Jun 24, 2024 am 11:18 AM

2024년은 AI 휴대폰 원년이다. AI 스마트 기술을 탑재해 휴대폰을 더욱 효율적이고 편리하게 사용할 수 있는 휴대폰이 늘어나고 있다. 최근 연초 출시된 갤럭시 S24 시리즈에서는 제너레이티브 AI 경험이 다시 한 번 향상됐다. 자세한 기능 소개는 아래에서 살펴보자. 1. 생성적 AI의 강력한 강화 Samsung Galaxy S24 시리즈는 Galaxy AI의 강화를 통해 많은 지능형 애플리케이션을 제공했습니다. 이러한 기능은 Samsung One UI6.1과 긴밀하게 통합되어 사용자가 언제든지 편리하고 지능적인 경험을 얻을 수 있습니다. 휴대전화의 성능과 사용 편의성을 향상시킵니다. 갤럭시 S24 시리즈가 개척한 원 앤 검색 기능은 사용자가 길게 누르기만 하면 되는 기능 중 하나입니다.

See all articles