그리고 아약스 요청을 처리하는 방법

1. 아약스는 무엇입니까

나는 아약스는 데이터의 비동기 요청 이해. AJAX 주로 브라우저 XMLHttpRequest 객체에 의해 제공 의존이 객체는 브라우저가 서버와 페이지 리프레시하지 않는 경우, 데이터를 교환 할 수 있도록 상기 HTTP 요청 및 응답을 수신 허용하는 HTTP 같은 기능을 갖는다.

2, 어떻게 기본 JS 아약스 요청

오 중요한 단계 :()가 있습니다
(1) XMLHttpRequest 객체를 만들기

var xhr = new XMLHttpRequest()

(2) 요청을 시작

xhr.open('GET/Post','url',ascyn) 

(3) 상기 요청을 전송, 이번에는 요청 된 데이터를 획득 할 수 있도록

xhr.send()

(4) 데이터를 얻기 위해는, 동기 및 비동기로 분할

되면 동기 데이터 취득

var data = xhr.responseText
console.log(data) 

단점 : 요청이 특히 느린 네트워크 인 경우, 페이지 요청은 사용자가 작동 할 수없는 데이터에 붙어 대기하고있다. 그래서 우리는 비동기 방식 (동기식를 권장하지 않음) 할 수 있습니다.

때 비동기 데이터 수집

//监听数据，内部数据到了会触发load
 xhr.addEventListener('load', function () {
    // 如果响应状态是200到300以内，或者等于304
    // 200到300都是请求数据成功的
    // 304 重定向（缓存）
    if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){
      //responseText：响应文本（内容）
      var data = xhr.responseText
      console.log(data)
    }else{
      console.log('出错了')
    }
 }

코드가 위에서 아래에서 실행되기 때문에, 더 적은 코드 실행 속도의 요청 데이터 레이트보다, 그 데이터의 도착을 모니터링 할 필요가 없다

마지막으로, 전체 표현은 다음과 같습니다

var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://hello.php', true)
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4) {
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            //成功了
            console.log(xhr.responseText)
        } else {
            console.log('服务器异常')
        }
    }
}
xhr.onerror = function(){
    console.log('服务器异常')
}
xhr.send()

Ajax를 사용하는 방법이, JQuery와

$.ajax({
            url:"/user/login",//url地址
            dataType:"json",//返回的数据类型
            type:"post",//发起请求的方式,get/post
            data:{//此处为请求的参数
                'name':name,
                'password':password
            },
            success:function(data) {
            //请求成功时，执行
            console.log(data)//后端接口返回的参数
            },
            error:function(){
            //请求失败时，执行
            }
        });