집 > 기사 > 웹 프론트엔드 > Ajax 코어 XMLHttpRequest 요약

Ajax 코어 XMLHttpRequest 요약

亚连원래의: 2018-05-25 12:00:071265검색

이 글은 Ajax의 핵심 내용인 XMLHttpRequest에 대한 관련 지식을 중심으로 요약한 내용으로 매우 상세하고 필요하신 분들은 꼭 참고하시기 바랍니다.

Ajax: 이것이 바로 "비동기 JavaScript 및 XML"(비동기 JavaScript 및 XML)입니다. 비동기 데이터 교환을 위해 JavaScript 개체 XMLHttpRequest를 사용하고 JavaScript는 XHTML+CSS를 사용하여 정보를 표현하고 DOM을 작동합니다. XSLT는 데이터를 조작합니다. 이 기사에서는 서버와의 비동기 데이터 교환을 위해 XMLHttpRequest 개체를 사용하는 데 중점을 둡니다.

사용법
XMLHttpRequest의 5단계 사용법:

1. 객체 생성
2. 콜백 함수 등록
3. 서버와의 상호 작용을 위한 기본 정보 설정
4. 전송할 데이터를 설정하고 서버와 상호 작용을 시작합니다.
5. 콜백 기능을 구현합니다.

XMLHttpRequest 객체를 사용할 때마다 5단계가 필요하므로 객체의 사용을 js 파일에 캡슐화할 수 있으며, 일부 매개변수를 전달하고 해당 메소드를 사용하여 해당 기능을 완료할 수 있습니다. :

//http 요청, URL 주소, 데이터, 성공 및 실패 콜백 메소드만 제공하는 캡슐화 메소드를 사용하세요
//1. XMLHttpRequest 객체의 생성 메소드 정의

var MyXMLHttpRequest =function（）{ 
    var xmlhttprequest; 
    if（window.XMLHttpRequest）{ 
    //IE7,IE8,FireFox,Mozillar,Safari,Opera 
    //alert（"IE7,IE8,FireFox,Mozillar,Safari,Opera"）； 
    xmlhttprequest = new XMLHttpRequest（）； 
    //解决浏览器在服务器端响应由于没有Text头的时候可能无法工作的问题 
    if（xmlhttprequest.overrideMimeType）{ 
    xmlhttprequest.overrideMimeType（"text/xml"）； 
    } 
    }else if（window.ActiveXObject）{ 
    //IE6,IE5.5,IE5 
    alert（"IE6,IE5.5,IE5"）； 
    var activexName =["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; 
    for （var n=0;n

확장 문제

1. 브라우저 캐시
2. 중국어 왜곡
3. 도메인 간 액세스

문제 1과 3은 URL 주소를 변경하면 해결될 수 있습니다. 문제 1은 URL 주소 끝에 타임스탬프를 추가하면 해결될 수 있고, 문제 3은 프록시를 통해 해결될 수 있습니다. send()의 세 번째 단계를 실행하기 전에 해당 판단을 추가하세요.

// 캐시 변환 해결: 타임스탬프 추가

if（url.indexOf（"?"） >= 0 ）{ 
    url = url + "&t=" + （new Date（））。valueOf（）； 
    } else { 
    url = url + "?t=" + （new Date（））。valueOf（）； 
    } 
    //解决跨域的问题 
    if（url.indexOf（"http://"） >= 0） { 
    url.replace（"?","&"）； 
    url = "Proxy?url=" + url; 
    }

질문 3은 프록시 서버 구현에 해당합니다.

/** 
    * Handles the HTTP GET method. 
    * 
    * @param request servlet request 
    * @param response servlet response 
    * @throws ServletException if a servlet-specific error occurs 
    * @throws IOException if an I/O error occurs 
    */ 
    @Override 
    protected void doGet（HttpServletRequest request, HttpServletResponse response） 
    throws ServletException, IOException { 
    //获取参数，最后得到请求url地址类似于：url = http://192.168…/AJAX/AJAXServer?aa=11&bb=22&cc=33 
    StringBuilder url = new StringBuilder（）； 
    url.append（request.getParameter（"url"））； 
    //获取访问的跨域地址url = http://192.168…/AJAX/AJAXServer 
    Enumeration enu = request.getParameterNames（）； 
    boolean flag = false;       //定义标志变量，表示是否为拼接的第一个参数 
    while（enu.hasMoreElements（））{ 
    String paramName = （String） enu.nextElement（）； 
    if（！paramName.equals（"url"））{ 
    String paramValue = request.getParameter（paramName）； 
    paramValue = URLEncoder.encode（paramValue,"utf-8"）； 
    if（！flag）{ 
    url.append（"?"）。append（paramName）。append（"="）。append（paramValue）； 
    flag = true; 
    } else { 
    url.append（"&"）。append（paramName）。append（"="）。append（paramValue）； 
    } 
    } 
    } 
    response.setContentType（"text/html;charset=utf-8"）； 
    PrintWriter out = response.getWriter（）； 
    if（url != null && url.length（） > 0）{ 
    URL connectionUrl = new URL（url.toString（））； 
    BufferedReader reader = new BufferedReader（new InputStreamReader（connectionUrl.openStream（），"utf-8"））；

위는 제가 컴파일한 것입니다. 여러분, 앞으로 모든 분들께 도움이 되었으면 좋겠습니다.

Ajax 코어 XMLHttpRequest 요약

관련 기사