집 >웹 프론트엔드 >JS 튜토리얼 >XMLHttpRequest 및 jQuery_jquery를 통해 Ajax를 구현하는 여러 가지 방법

XMLHttpRequest 및 jQuery_jquery를 통해 Ajax를 구현하는 여러 가지 방법

WBOY원래의: 2016-05-16 15:41:541131검색

예제 1: Ajax를 사용하여 동적으로 시간을 얻는 예입니다.

HTML 코드:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <script type="text/javascript" src="Scripts/jquery-1.7.1.js"></script>
  <script type="text/javascript" src="Scripts/jwy.js"></script> 
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <input type="text" name="textbox" id="text1" />
    <input type="button" name="button" id="Button1" value="显示时间" onclick="btnclick()" />
  </div>
  </form>
</body>
</html>

포그라운드 요청을 처리하고 현재 시스템 시간을 반환하는 "일반 처리기"를 만듭니다.

Handler.ashx

<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
using System.Linq;
using System.Collections.Generic;
using System.Text;
public class Handler : IHttpHandler {
  public void ProcessRequest (HttpContext context) {
    context.Response.ContentType = "text/plain";
    context.Response.Write(ShowTime());
  }
  public bool IsReusable {
    get {
      return false;
    }
  }
  public static string ShowTime()
  {
    return DateTime.Now.ToString(); 
  }
}

js 코드:

function btnclick() {
  var httprequest = null;
  // 初始化XMLHttpRequest对象
  if (window.XMLHttpRequest) {
    // Firefox等现代浏览器中的XMLHttpRequest对象创建
    httprequest = new XMLHttpRequest();
  }
  else if (window.ActiveXObject) {
    // IE中的XMLHttpRequest对象创建
    httprequest = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (!httprequest) {
    alert("创建httprequest对象出现异常！");
  }
  httprequest.open("POST", "Handler.ashx", true);
  //httprequest向handler发送post请求，最后参数是设定是否为异步请求,true为异步，false为同步
  httprequest.onreadystatechange = function () {
    //指定onreadystatechange事件句柄对应的函数
    if (httprequest.readyState == 4) {
      //4代表服务器返回完成
      if (httprequest.status == 200) {
        //200代表成功了
        document.getElementById("text1").value = httprequest.responseText;
        //responsetext表示服务器返回的文本,还有一种方式是responseXML是为了获取服务器返回的xml
      }
      else {
        alert("AJAX服务器返回错误！");
      }
    }
  }
  httprequest.send();
  //在这里才真正的向服务器端发送请求
}

우리는 jquery를 사용하여 프런트엔드 js 코드를 매우 간단하게 만듭니다.

jquery 기반 JS 코드:

참고: js에서 이벤트 바인딩을 직접 사용하기 때문에 HTML 코드는 버튼의 onclick 이벤트를 제거해야 합니다.

$(document).ready(function () {
  //button1绑定事件
  $("#Button1").bind("click", function () {
    $.ajax({
      url: "Handler.ashx",
      type: "POST",
      success: function (data) {
        //$("#text1").val(data);
        document.getElementById("text1").value = data;
      }
    });
  });
});

jquery는 "단순하지만 단순하지 않다"고 말하고 싶습니다...

jquery의 $.ajax는 get 및 post 메서드를 통합하며 기본값은 get입니다.

POST를 직접 사용하면 코드가 더 간단해집니다

$(document).ready(function () {
  //button1绑定事件
  $("#Button1").bind("click", function () {
    $.post("Handler.ashx", function (data) {
  document.getElementById("text1").value = data;
    });  
 });
});

예 2:

1. 데이터를 얻기 위한 XMLHttpRequest 구현

페이지를 새로 고치지 않고 콘텐츠를 얻는 방법을 얻으려면 jQuery를 사용하지 마세요. 여기서는 XMLHttpRequest 기본 코드를 사용하여 구현합니다.

js 코드는 다음과 같습니다.

//1.获取a节点，并为其添加Oncilck响应函数
document.getElementsByTagName("a")[0].onclick = function(){
　　 //3、创建一个XMLHttpRequest();
  var request = new XMLHttpRequest();
  //4、准备发送请求的数据url
  var url = this.href;
  var method = "GET";
  //5、调用XMLHttpRequest对象的open方法
  request.open(method,url);
  //6、调用XMLHttpRequest对象的send方法
  request.send(null);
  //7、为XMLHttpRequest对象添加onreadystatechange 响应函数
  request.onreadystatechange = function(){
    //8、判断响应是否完成：XMLHttpRequest 对象的readystate的属性值为4的时候
    if(request.readyState == 4){
       //9、在判断响应是否可用：XMLHttpRequest 对象status 属性值为200
      if(request.status == 200){
           //10、响应结果
           alert(request.responseText);
      }   
    }  
  }    
      //2、取消a节点的额默认行为
      return false;    
}

HTML 코드 삽입:

<a href = "hello.txt">点击获取文本内容</a>

2. jQuery는 정보를 얻기 위해 ajax를 구현합니다

이 예는 드롭다운 버튼의 내용을 변경하기 위해 배경에서 동적으로 데이터를 얻는 것입니다.

js 코드는 다음과 같습니다.

function bindCarteam0(){
     //通过URL请求数据
     var URL = <select:link page="/xiaoshouwl.do&#63;method=getCarteamList"/>;
      $.ajax({
        url:URL,
        type:'GET',
        dataType: "json",
        success:function(html){
          var str="<option value='-1'>全部</option>";
          for(var i=0;i<html.length;i++){
            str+="<option value='"+html[i].id+"'>"+html[i].name+"</option>";
          }
          $("#carteam_code").empty().html(str);
        }
      });
   }

HTML 코드는 다음과 같습니다.

<select:select property="carteam_code" styleId="carteam_code" style="width:150px">
                     <select:option value="-1">全部</select:option>
                </select:select>

가져오기와 게시라는 두 가지 유형이 있습니다.

게시물이 전송할 수 있는 데이터의 양은 상대적으로 많고 바이트 제한이 있습니다.

성명：

이전 기사：Node.js는 매우 간단한 확장 및 접기 디렉터리 code_javascript 기술을 구현합니다.다음 기사：Node.js는 매우 간단한 확장 및 접기 디렉터리 code_javascript 기술을 구현합니다.

XMLHttpRequest 및 jQuery_jquery를 통해 Ajax를 구현하는 여러 가지 방법

관련 기사