집 >웹 프론트엔드 >JS 튜토리얼 >Ajax 및 크로스 도메인 문제에 대한 심층 분석_AJAX 관련

Ajax 및 크로스 도메인 문제에 대한 심층 분석_AJAX 관련

韦小宝원래의: 2018-01-01 19:45:351202검색

이 글에서는 주로 Ajax와 크로스 도메인 문제를 자세히 소개하면서 Ajax가 무엇이고 크로스 도메인이 무엇인지 알려드립니다. 관심 있는 친구들은

What is ajax

를 참고하면 됩니다. Ajax(Asynchronous JavaScript 및 XML)는 페이지를 새로 고치지 않고도 서버에 추가 데이터를 요청할 수 있는 방식입니다. Ajax의 핵심은 XMLHttpRequest(XHR) 개체입니다. XHR은 서버에 요청을 보내고 서버 응답을 구문 분석하기 위한 원활한 인터페이스를 제공합니다. 이름에 XML이 포함되어 있지만 Ajax 통신은 데이터 형식과 관련이 없습니다. 이 기술은 새로 고치지 않고도 서버에서 데이터를 가져올 수 있지만 반드시 XML 데이터일 필요는 없습니다.

XMLHttpRequest 객체

POST 요청 사용

요청 헤더 xhr.setRequestHeader() POST 요청 헤더 Content-Type 값: application/x-www-form-urlencoded3)을 설정해야 합니다. .요청 본문 xhr.send() get 요청을 null로 설정하고 상황에 따라 게시합니다 3. 서버 응답을 처리합니다

먼저 응답

상태 코드

와 비동기 개체가 파싱되었는지 확인합니다.

서버에서 반환된 상태 코드 상태
1xx: message
2xx: 성공

3xx: 리디렉션

4xx: 요청 오류

5xx: 서버 오류

비동기 개체의 상태 코드 ReadyState

0: 비동기 객체가 생성되었습니다

1: 비동기 객체 초기화가 완료되어 요청을 보냅니다

2: 서버에서 반환된 원본 데이터를 받습니다3: 데이터를 구문 분석하는 중이며 구문 분석에 시간이 걸립니다
4: 데이터 구문 분석이 완료되고 데이터를 사용할 수 있습니다

XML

W3C에서 공식화한 XML의 특징은 Microsoft와 IBM에서 강력하게 권장하는 데이터 형식입니다. XML은 확장 가능한 마크업 언어(Extensible Markup Language)를 의미합니다. , 데이터를 전송하고 저장하도록 설계되었으며 HTML은 페이지를 표현하도록 설계되었습니다.

문법 규칙: HTML과 유사하며 태그를 통해 표현됩니다.

특수 기호: 18647da0b5f8779475d6f36ba3d87e55元素来使用,src属性知道一个跨域URL,JSONP是有效的JavaScript代码,浏览器可以跨域请求JS文件.
优点:简单易用,可以直接访问响应文本,支持在浏览器和服务器之间双向通信.
缺点:1.JSONP是从其他域加载代码执行,存在不安全风险.2.不好确定JSONP请求是否成败.

通过修改document.domain来跨子域

使用window.name来进行跨域

HTML5中新引进 window.postMessage方法来跨域传送数据

flash

iframe

服务器设置代理页面

图像Ping

通过使用标签,利用网页可以从任何网页加载图像原理.
图像Ping常用于跟踪用户点击页面或动态广告曝光次数.

2个缺点:1.只支持GET请求.2.无法访问服务器的响应文本.只能用于浏览器与服务器间的单项通信.

var img = new Image();
img.onload = img.onerror = function (){
alert("Done!");
};
img.src = "";

comet

一种更高级的ajax技术.ajax是页面向服务器请求数据的技术.comet是服务器向页面推送数据的技术.

SSE (Server-Sent Events) 服务器发送事件

Web Sockets

Web Sockets的目标是在一个单独的持久链接上提供全双工,双向通信.

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。

Ajax 및 크로스 도메인 문제에 대한 심층 분석_AJAX 관련

관련 기사