jQuery AJAX 지식 포인트 요약

이번에는 편집자가 모두를 위해 AJAX의 지식 포인트를 jQuery로 정리했습니다. 다음은 지식 포인트를 요약한 것입니다.

1. AJAX 개념
Asynchronous Javascript And XML(asynchronous JavaScript and XML)
AJAX는 언어가 아니라 대화형 웹 애플리케이션을 만들기 위한 웹 개발 기술입니다.
AJAX는 Javascript, XHTML, CSS 및 DOM입니다. XML의 조합, 4. 동적 표시 및 상호 작용을 위해 Javascript를 사용하여 문서 개체 모델(네트워크 문서 개체 모델)을 작동합니다.
5. JavaScript를 사용하여 모든 데이터를 바인딩하고 처리합니다.
XML이란? EXtensible Markup Language)
XML HTML과 매우 유사한 마크업 언어입니다. XML은 데이터를 표시하는 것이 아니라 데이터를 전송하도록 설계되었습니다. 라벨을 직접 정의해야 합니다.
XML은 자기 설명이 가능하도록 설계되었습니다.
XML은 W3C에서 권장하는 표준입니다.
XSLT란 무엇인가요?
XSLT는 XSL 변환을 나타냅니다 [1]
XSLT는 XSL의 가장 중요한 부분입니다
XSLT는 한 종류의 XML 문서를 다른 종류의 XML 문서로 변환할 수 있습니다
XSLT는 W3C 표준을 사용합니다


AJAX의 핵심 개체는 XMLHttpRequest입니다




II. AJAX 작동 원리


사용자 작업 프로세스:
사용자 브라우저 ->JavaScript는 XmlHttpRequest 객체를 인스턴스화합니다. ->AJAX 엔진 ->http 요청- >웹 서버->백엔드 비즈니스 시스템
시스템 반환 프로세스:
백엔드 비즈니스 시스템->백엔드 서버->웹 서버->HTML, XML, JSON 데이터->AJAX 엔진->HTML+CSS(Wel 브라우저)-> 사용자 브라우저
3. AJAX 장점과 단점:


AJAX 비동기 처리 장점:
서버 부담 감소, AJAX는 일반적으로 서버에서 필요한 데이터만 가져옵니다.
새로 고침 페이지 업데이트 없음, 사용자 대기 시간 감소
더 나은 고객 경험, 일부 서버 작업을 클라이언트로 전송하여 완료하고, 네트워크 리소스를 절약하고, 사용자 경험을 향상시킬 수 있습니다. 플랫폼 제한이 없습니다. 디스플레이와 데이터의 분리를 촉진합니다. AJAX 비동기 처리의 단점:페이지에 JS가 많이 있습니다. 검색 엔진에 어려움을 초래합니다
AJAX가 뒤로 및 기록 기능을 종료하여 브라우저 메커니즘을 손상시킵니다
도메인 간 문제가 있습니다
utf-8로 인코딩된 데이터만 전송 및 수신할 수 있습니다




1.AJAX 구현 단계




window.open(URL,name,features,replace)
URL:새 창에 표시할 문서의 URL을 선언하는 선택적 문자열입니다. 이 매개변수가 생략되거나 해당 값이 빈 문자열인 경우 새 창에 문서가 표시되지 않습니다.
이름:
숫자, 문자, 밑줄을 포함한 기능을 쉼표로 구분한 목록인 선택적 문자열,
이 문자 새 창의 이름을 선언합니다. 이 이름은 3499910bf9dac5ae3c52d5ede7383485 및 ff9c23ada1bcecdd1a0fb5d5a0f18437 태그의 대상 속성 값으로 사용될 수 있습니다.
이 매개변수가 기존 창을 지정하는 경우 open() 메서드는 더 이상 새 창을 생성하지 않지만 지정된 창에 대한 참조만 반환합니다. 이 경우 기능은 무시됩니다. features: 새 창에 표시될 표준 브라우저 기능을 선언하는 선택적 문자열입니다. 이 매개변수를 생략하면
새 창에 모든 표준 기능이 적용됩니다. 창 특성 표에서 이 문자열의 형식을 자세히 설명합니다.
replace:
선택적인 부울 값입니다. 창에 로드된 URL이 창의 검색 기록에 새 항목을 생성하는지, 아니면 검색 기록의 현재 항목을 대체하는지 여부를 지정합니다. 다음 값이 지원됩니다.
true - URL이 검색 기록의 현재 항목을 대체합니다.
false - URL은 검색 기록에 새 항목을 생성합니다.


send()send()는 이미 연결된 소켓으로 데이터를 보내는 데 사용됩니다. 오류가 없으면 반환 값은 전송된 총 데이터 수입니다. 그렇지 않으면 SOCKET_ERROR를 반환합니다. [1] Send도 영어 단어입니다.


responseText 속성:


서버 프로세스에서 반환한 데이터의 텍스트 버전
서버 프로세스에서 반환한 데이터의 DOM 호환 XML 문서 객체 상태 status 서버에서 반환한 상태 코드(예: : 404 = "파일을 찾을 수 없습니다."
요청 ajax 백그라운드 프로그램이 xmlhttp 요청을 보내면 백그라운드 프로그램은 요청을 받은 후 처리가 완료된 후 데이터 문자열을 프런트 데스크로 반환할 수 있습니다. ,
responseText 입니다.
일반적으로 C# 백그라운드 프로그램에서는 Response.Write("String")입니다. php에서 사용하는 것은 echo... 출력 문자열입니다
문자열을 출력하고 싶지만 가끔 배열을 얻었지만 이를 직렬화해야 하는 경우 PHP의 json 기술을 사용하여 배열을 문자열로 변환하여 프런트엔드로 출력하고 프런트엔드 respText 속성은 이 문자열을 수신한 다음 이 문자열을 변환하는 JS의 json 기술 다시 JS에서 인식하는 객체로 변환하여 작업합니다. (json 데이터 전송 방식은 기본적으로 모든 언어에 알려져 있으며 다양한 언어로 전송 및 변환에 사용할 수 있습니다.)


XMLHttpRequest 객체 초기화

  if (window.XMLHttpRequest) {// Mozilla, Safari, ...
var http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 5 ,6
var http_request = new ActiveXObject("Microsoft.XMLHTTP");
}

XMLHttpRequest는 HTTP를 발행합니다. request

http_request.open("GET|POST","test.php?GET方式传值",true);
          http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //仅POST请求时需要设置
         //用于向一个已经连接的socket发送数据
         //如果是POST传输方式要把值写在send()函数里
          http_request.send(向一个已连接的套接口发送数据);
      XMLHttpRequest取得响应数据并显示
       http_request.onreadystatechange=function(){
if(http_request.readyState==4  && http_request.status==200){
                    $("p").text(http_request.responseText)
         }
      }

예:
//GET 메소드
매개변수 1: 요청을 get 또는 post 모드로 보낼지 나타냅니다. 매개변수 2: 요청을 보낼 URL 매개변수 3: true는 비동기식 요청을 나타내고, false는 동기식을 나타냅니다. request

http_request.open("GET","test.php?user_name="+username.val(),true);
http_request.send();

POST 요청 보내기

var username=$("input[name='user_name']");

매개변수 1: 요청을 get 또는 post 모드로 보낼지 여부를 나타냅니다. 매개변수 2: 요청을 보낼 URL 매개변수 3: true는 비동기 요청을 나타내고, false는 동기를 나타냅니다. request

http_request.open("POST","test.php",true);
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

POST 전송 방식이라면 send( ) 함수에 값을 적어주세요

http_request.send({username:username});

IV.JSON
Javascript Object Notation은 경량 데이터 교환 포맷입니다
JSON은 모든 언어에서 인식됩니다. 다양한 언어로 데이터를 변환하는데 활용해보세요
JSON 지원 다국어 ​​
Format
{key:value,key:value,.....} 객체 형식
[{key:value,key:value,... ..},{key:value,key:value, .....},......] 배열 형식
PHP 처리:
$json=json_encode($array) //변수에 대한 JSON 인코딩
$ array=json_decode($json) //Json 데이터 디코드하여 PHP 변수로 변환
JavaScript 처리:
eval('('+json+')') //JS 코드에 따라 특정 문자열을 실행
예:

eval("x=10;y=20;document.write(x*y)")
document.write(eval("2+2"))
JSON.parse(json) //对传过来的json字符串进行解码，变成JS认识的对象
JSON.stringify(obj) //将JS中的值编译成json字符串

5. jQuery 1의 AJAX 애플리케이션
.

$.ajax({
            //你要传的php文件的路径
            url:"test1.php",    ('服务器url地址')
            //以get方式传输拼接字符串
            data:"user_name="+$('input[name="user_name"]').val(),('名=值&名=值&.....',)
            //以什么方式传输
            type:'get',('post|get')
            //传输返回的数据类型
            dataType:'json',  ('xml|html|text|json|script')
            //展示 数据的方式
            success:function(res){
                $('h1').text('用户名为：'+res.user_name);
            },
                //错误信息
                error:function(xhr){
                },
              timeout:2000,
              async:true,
              cache:false
})

라고 쓰는 것을 잊지 마세요. 6. jQuery 2의 AJAX 애플리케이션

$.get()
$.get('服务器url地址'，"json格式或字符串格式"，function(res){
        //处理返回的数据
}), "xml|html|json|text|script")

예:

            //'服务器url地址'，"json格式或字符串格式"
        $.get("test1.php",{user_name:$("input[name='user_name']").val()},function(data){
               //如果后台发过来的值跟这里的值相等让他执行下面代码
                if(data.status=='ok'){
                    alert("登陆成功");
                    location.href="http://www.wl.com";
                }else{
                    alert("登陆失败");
                }
        //"xml|html|json|text|script"类型
        },'json')

7. jQuery 3의 AJAX 애플리케이션
serialize( ) 시퀀스 테이블 테이블의 내용은 문자열이며 직렬화된 데이터는 Ajax 요청에 사용됩니다

$.post()
$.post('服务器url地址'，"json格式或字符串格式"，function(res){
        //处理返回的数据
}), "xml|html|json|text|script")

예:

//'服务器url地址'，"json格式或字符串格式" 用post方式提交要用form表单包起来
        // 然后用serialize()来拿里面所有有值
        $.post("test1.php",$('form').serialize(),function(res){
            //如果后台发过来的值跟这里的值相等让他执行下面代码
            if(res.status=='ok'){
                alert("登陆成功");
                location.href="http://www.wl.com";
            }else{
                alert("登陆失败");
            }
            //"xml|html|json|text|script"类型
        },'json')

php

try{
    $pdo=new PDO("mysql:host=127.0.0.1;port=3306;dbname=数据库名",'数据库账号','数据库密码');
    $pdo->exec("set names utf8");
    $sen=$pdo->query("select * from yh_admin where user_name='{$user_name}' limit 1");
    if($sen->rowCount()>0){
       // $arr=$sen->fetch(PDO::FETCH_ASSOC);
        //echo json_encode($arr);
        //echo 'yes';
       $arr['status']='ok';
    }else{
        echo 'no';
    }
    //切记用json数据类型传输
    echo json_encode($arr);
}catch (PDOException $e){
    echo $e->getMessage();
}

에서 출력을 수신하고 처리합니다.

위 내용은 jQuery AJAX 지식 포인트 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!