|
1
2
3
4
5
6
|
fetch('html').then(function(response){
console.log(response.status);
response.text().then(function(text){
document.querySelector('article').innerHTML = text;
})
})
|
cs |
- fetch() : 첫번째 인자로 받은 페이지(위 예시에서는 html)를 전달하는 역할
- then() : fetch()가 응답이 끝나면 매개변수로 받은 콜백함수를 호출함
- text: 서버가 응답한 내용이 담겨있는 변수
- response : fetch()를 통해 페이지를 요청했을 때 웹서버가 응답한 결과 정보를 담고 있는 객체
- status : 응답값을 가져옴
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<body>
<a href="#!three">three</a>
<p id = "three">
As the UK begins the slow process of reopening some businesses and returning to work, the BBC has been given unprecedented access to a hospital in the heart of London, for one week.
Medical staff at the Royal London Hospital say a rise in cases is inevitable as members of the public have more contact with each other.
The hospital serves the densely-populated area of Tower Hamlets, which has seen hundreds of deaths due to coronavirus across all communities, but with the Asian population being hardest hit.
</p>
<script>
// URL에 해쉬가 있을 경우
if(location.hash){
// 해당 해쉬값 콘솔에 찍기('#' 제외)
console.log(location.hash.substr(1));
}else{
}
</script>
</body>
|
cs |
- URL의 변경 없이 페이지의 내용이 바뀌는 ajax는 전체 페이지 중 보여주려는 단락을 URL로 넘겨줄 수 없었기 때문에
태그 속성값 중 id를 이용해 원하는 단락으로 이동할 수 있도록 함.
- url + #id값을 통해 해당 단락으로 이동할 수 있으며, a 태그를 통해 링크를 걸 수도 있다.
- 링크는 #!아이디값으로 되어있으며 이를 해쉬뱅이라고 함
'생활코딩' 카테고리의 다른 글
| [ajax] 준비 - Apache 웹서버 설치 (0) | 2020.05.25 |
|---|