원생 js 의 ajax 와 도 메 인 을 뛰 어 넘 는 jsonp 해결(인 스 턴 스 설명)
쓸데없는 소리 하지 말고 먼저 ajax 로 로 로 컬.txt 파일 을 요청 하 십시오.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload =function(){
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
// XHR
var xhr = new XMLHttpRequest();
// ， ，
xhr.open('get','test.txt',true);
// ， ， ，
xhr.send(null);
// readyState onreadystatechange
// readyState ： /
//readyState
/*
* 0： ， send()
* 1:
* 2：
* 3：
* 4：
*/
xhr.onreadystatechange =function(){
if(xhr.readyState ==4){
alert(xhr.responseText);
}
}
};
};
</script>
</head>
<body>
<input type="button" id="btn" value="show">
</body>
</html>
코드 가 비교적 간단 하고 주석 을 더 하면 쉽게 알 아 볼 수 있 을 것 이 라 고 믿 습 니 다.
그러나 작업 중 에 우 리 는 다른 도 메 인 에 있 는 자원(같은 소스 정책 때문에)을 자주 요청 합 니 다.이 럴 때 도 메 인(프로 토 콜,포트,도 메 인 이름 이 다 르 더 라 도 도 도 메 인)을 만 났 습 니 다.
크로스 도 메 인 을 해결 하 는 데 자주 사용 되 는 방법 은 jsonp 입 니 다.한계 가 있 지만 구식 브 라 우 저 를 호 환 하 는 것 이 장점 입 니 다.(하지만 지금 은 구식 브 라 우 저 에 신경 쓰 는 사람 이 별로 없 는 것 같 습 니 다)
jsonp 의 기본 원리:동적 으로 script 라벨 을 만 드 는 것 입 니 다.script 라벨 의 src 는 도 메 인 제한 이 없습니다.
다음 바 이 두 검색 드 롭 다운 페이지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
input{
width:300px;
height:30px;
border:1px solid lightgray;
margin-top: 150px;
margin-left: 200px;
padding-left: 5px;
}
ul{
width:307px;
list-style: none;
margin-left: 200px;
display: none;
}
li{
height:30px;
border: 1px solid lightgray;
line-height: 30px;
padding-left: 5px;
}
</style>
<script>
function callbackD(response){
var oUl = document.getElementById('ulList');
var html='';
if(response.s.length !=0){
oUl.style.display='block';
for(var i = 0;i<response.s.length;i++){
html+='<li>'+response.s[i]+'</li>'
}
}
oUl.innerHTML = html;
}
</script>
<script>
window.onload = function(){
// dom
var oData = document.getElementById('inputSearch');
var oUl = document.getElementById('ulList');
// (onkeyup)
oData.onkeyup = function(){
if(oData.value != ''){
// (createElement)
var script = document.createElement("script");
//
script.src='http://unionsug.baidu.com/su?wd='+this.value+'&p=3&cb=callbackD';
// body ( body )
document.body.appendChild(script);
}else{
oUl.style.display='none';
}
}
};
</script>
</head>
<body>
<input type="text" id="inputSearch">
<ul id="ulList">
<li>123</li>
</ul>
</body>
</html>
코드 도 상대 적 으로 간단 합 니 다.코드 의 주석 을 더 하면 쉽게 알 아 볼 수 있 습 니 다.이것 이 바로 도 메 인 을 뛰 어 넘 는 일반적인 방법 입 니 다.다른 것 은 역방향 대리,CORS 등 이 있 습 니 다.제 가 잘 배우 고 정리 하 겠 습 니 다.
이상 의 원생 js 의 ajax 와 도 메 인 을 뛰 어 넘 는 jsonp(인 스 턴 스 설명)는 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 많은 응원 을 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Javascript Ajax에 대한 간단한 연습저는 약 4년 동안 프로그래밍 개인 튜터로 일한 경험이 있습니다. 약 5년 전에 " "이라는 제목의 페르시아어로 내 웹사이트에 블로그 게시물을 올렸고 사람들이 저에게 전화하기 시작했습니다. 나는 항상 사람들을 가르치...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
