Ajax 코어 XMLHttpRequest 요약

이 글은 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 도메인 간 요청 데이터 쿠키 손실 문제에 대한 솔루션

JavaScript는 Ajax를 기반으로 하여 새로 고침 없이 웹 페이지에 파일 콘텐츠를 동적으로 표시합니다.

Ajax를 사용하여 열 URL을 새로 고치지 않고 페이지 콘텐츠 및 주소 변경

위 내용은 Ajax 코어 XMLHttpRequest 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!