자바스크립트 네이티브 Ajax 작성방법_javascript 스킬 공유

ajax: 전체 페이지를 새로 고치지 않고 데이터를 요청하는 방법
Ajax의 기술적 핵심은 XMLHttpRequest 객체입니다. ajax 요청 프로세스: XMLHttpRequest 객체 생성, 서버 연결, 요청 전송, 응답 데이터 수신

/**
 * 得到ajax对象
 */
function getajaxHttp() {
  var xmlHttp;
  try {
    //chrome, Firefox, Opera 8.0+, Safari
    xmlHttp = new XMLHttpRequest();
    } catch (e) {
      // Internet Explorer
      try {
        //IE5，6
        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
      try {
        //IE7以上
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        alert("您的浏览器不支持AJAX！");
        return false;
      }
    }
  }
  return xmlHttp;
}
/**
 * 发送ajax请求
 * url--url
 * methodtype(post/get)
 * con (true(异步)|false(同步))
 * parameter(参数)
 * functionName(回调方法名，不需要引号,这里只有成功的时候才调用)
 * (注意：这方法有二个参数，一个就是xmlhttp,一个就是要处理的对象)
 * obj需要到回调方法中处理的对象
 */
function ajaxrequest(url,methodtype,con,parameter,functionName,obj){
  var xmlhttp=getajaxHttp();
  xmlhttp.onreadystatechange=function(){
     
    // readyState值说明 
    // 0,初始化,XHR对象已经创建,还未执行open 
    // 1,载入,已经调用open方法,但是还没发送请求 
    // 2,载入完成,请求已经发送完成 
    // 3,交互,可以接收到部分数据 
  
    // status值说明 
    // 200:成功 
    // 404:没有发现文件、查询或URl 
    // 500:服务器产生内部错误 
 
    if(xmlhttp.readyState==4&& XHR.status == 200){
      //HTTP响应已经完全接收才调用
      functionName(xmlhttp,obj);
    }
  };
  xmlhttp.open(methodtype,url,con);
  xmlhttp.send(parameter);
}
//这就是参数
function createxml(){
  var xml="<user><userid>asdfasdfasdf<\/userid><\/user>";//"\/"这不是大写V而是转义是左斜杠和右斜杠
  return xml;
}
//这就是参数
function createjson(){
  var json={id:0,username:"好人"};
  return json;
}
function c(){
  alert("");
}

//테스트

ajaxrequest("http://www.baidu.com","post",true,createxml(),c,document);

다른 예를 살펴보겠습니다

ajax({
    url: "./TestXHR.aspx",       //请求地址
    type: "POST",            //请求方式
    data: { name: "super", age: 20 },    //请求参数
    dataType: "json",
    success: function (response, xml) {
      // 此处放成功后执行的代码
    },
    fail: function (status) {
      // 此处放失败后执行的代码
    }
  });

  function ajax(options) {
    options = options || {};
    options.type = (options.type || "GET").toUpperCase();
    options.dataType = options.dataType || "json";
    var params = formatParams(options.data);

    //创建 - 非IE6 - 第一步
    if (window.XMLHttpRequest) {
      var xhr = new XMLHttpRequest();
    } else { //IE6及其以下版本浏览器
      var xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    //接收 - 第三步
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        var status = xhr.status;
        if (status >= 200 && status < 300) {
          options.success && options.success(xhr.responseText, xhr.responseXML);
        } else {
          options.fail && options.fail(status);
        }
      }
    }

    //连接 和 发送 - 第二步
    if (options.type == "GET") {
      xhr.open("GET", options.url + "&#63;" + params, true);
      xhr.send(null);
    } else if (options.type == "POST") {
      xhr.open("POST", options.url, true);
      //设置表单提交时的内容类型
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xhr.send(params);
    }
  }
  //格式化参数
  function formatParams(data) {
    var arr = [];
    for (var name in data) {
      arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
    }
    arr.push(("v=" + Math.random()).replace(".",""));
    return arr.join("&");
  }

원리를 살펴보겠습니다

1. 만들기

1.1, IE7 이상에서는 기본 XHR 객체를 지원하므로 직접 사용할 수 있습니다. var oAjax = new XMLHttpRequest();

1.2, IE6 및 이전 버전에서는 XHR 개체가 MSXML 라이브러리의 ActiveX 개체를 통해 구현되었습니다. 일부 책에서는 IE에 있는 이러한 개체의 세 가지 버전, 즉 MSXML2에 대해 자세히 설명합니다. =new ActiveXObject('Microsoft.XMLHTTP');

2. 연결하고 보내기

2.1. open() 함수의 세 가지 매개변수: 요청 방법, 요청 주소, 비동기 요청 여부(동기 요청은 드물고 지금까지 사용되지 않음)

2.2. GET 요청 방식은 URL 매개변수를 통해 서버에 데이터를 제출하고, POST는 전송 매개변수로 데이터를 서버에 제출합니다.

2.3. POST 요청에서는 데이터를 보내기 전에 양식 제출의 콘텐츠 유형을 설정해야 합니다.

2.4. 서버에 제출된 매개변수는 encodeURIComponent() 메소드를 통해 인코딩되어야 합니다. 실제로 매개변수 목록 "key=value"에는 키와 값 모두 특수 문자가 포함되어 있으므로 인코딩해야 합니다. 요청이 이루어질 때마다 "v=xx" 문자열이 매개변수 목록에 입력됩니다. 이는 캐싱을 거부하고 매번 서버에 직접 요청하는 것입니다.

encodeURI(): 전체 URI를 인코딩하는 데 사용됩니다. 콜론, 슬래시, 물음표 및 파운드 기호와 같은 URI의 일부인 특수 문자는 인코딩되지 않습니다. 🎜> encodeURIComponent(): URI의 특정 부분을 인코딩하는 데 사용되며, 해당 디코딩 함수 decodeURIComponent()는 발견된 비표준 문자를 인코딩합니다.

3. 받기

3.1. 응답을 받은 후 응답 데이터는 XHR 객체에 자동으로 채워집니다

responseText: 응답에 의해 반환된 본문 내용으로, 문자열 유형입니다. responseXML: 응답의 콘텐츠 유형이 "text/xml" 또는 "application/xml"인 경우 이 속성은 XML에 해당하는 문서 유형인 해당 xml 데이터를 저장합니다. 상태: 응답 HTTP 상태 코드

statusText: HTTP 상태 설명

3.2. XHR 객체의 ReadyState 속성은 요청/응답 프로세스의 현재 활성 단계를 나타냅니다.
0 - 초기화되지 않았습니다. open() 메서드가 호출되지 않았습니다.
1-시작, open() 메서드가 호출되고 send() 메서드가 호출되지 않습니다.
2-보내기, send() 메소드가 호출되었지만 응답이 수신되지 않았습니다.

3-수신, 응답 데이터의 일부가 수신되었습니다.

4-완료, 모든 응답 데이터가 수신되었습니다.

readyState의 값이 변경되는 한 Readystatechange 이벤트가 호출됩니다. (사실 논리적인 원활함을 위해 Readystatechange는 전송 후에 배치할 수 있습니다. 전송 시 서버에 요청하면 네트워크 통신이 발생하므로 시간이 걸립니다. 전송 후 Readystatechange 이벤트를 지정하는 것도 가능합니다. 저는 보통 이렇게 사용하지만 표준화와 브라우저 간 호환성을 위해 열기 전에 지정하는 것이 좋습니다.

3.3.readystatechange 이벤트에서 먼저 응답이 수신되었는지 확인한 다음, 서버가 요청을 성공적으로 처리했는지 확인합니다. 304로 시작하는 상태 코드는 성공을 의미합니다. 코드는 각 요청에 임의의 숫자를 추가하므로 값이 캐시에서 검색되지 않으므로 이 상태를 판단할 필요가 없습니다.

4. Ajax 요청은 도메인을 넘을 수 없습니다!