XMLHttpRequest 및 jQuery_jquery를 통해 Ajax를 구현하는 여러 가지 방법
예제 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를 구현합니다
이 예는 드롭다운 버튼의 내용을 변경하기 위해 배경에서 동적으로 데이터를 얻는 것입니다.
function bindCarteam0(){ //通过URL请求数据 var URL = <select:link page="/xiaoshouwl.do?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>
게시물이 전송할 수 있는 데이터의 양은 상대적으로 많고 바이트 제한이 있습니다.

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











프론트 엔드 개발시 프론트 엔드 열지대 티켓 인쇄를위한 자주 묻는 질문과 솔루션, 티켓 인쇄는 일반적인 요구 사항입니다. 그러나 많은 개발자들이 구현하고 있습니다 ...

기술 및 산업 요구에 따라 Python 및 JavaScript 개발자에 대한 절대 급여는 없습니다. 1. 파이썬은 데이터 과학 및 기계 학습에서 더 많은 비용을 지불 할 수 있습니다. 2. JavaScript는 프론트 엔드 및 풀 스택 개발에 큰 수요가 있으며 급여도 상당합니다. 3. 영향 요인에는 경험, 지리적 위치, 회사 규모 및 특정 기술이 포함됩니다.

JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

동일한 ID로 배열 요소를 JavaScript의 하나의 객체로 병합하는 방법은 무엇입니까? 데이터를 처리 할 때 종종 동일한 ID를 가질 필요가 있습니다 ...

이 기사에서 시차 스크롤 및 요소 애니메이션 효과 실현에 대한 토론은 Shiseido 공식 웹 사이트 (https://www.shiseido.co.jp/sb/wonderland/)와 유사하게 달성하는 방법을 살펴볼 것입니다.

JavaScript를 배우는 것은 어렵지 않지만 어려운 일입니다. 1) 변수, 데이터 유형, 기능 등과 같은 기본 개념을 이해합니다. 2) 마스터 비동기 프로그래밍 및 이벤트 루프를 통해이를 구현하십시오. 3) DOM 운영을 사용하고 비동기 요청을 처리합니다. 4) 일반적인 실수를 피하고 디버깅 기술을 사용하십시오. 5) 성능을 최적화하고 모범 사례를 따르십시오.

프론트 엔드에서 VSCODE와 같은 패널 드래그 앤 드롭 조정 기능의 구현을 탐색하십시오. 프론트 엔드 개발에서 VSCODE와 같은 구현 방법 ...

Console.log 출력의 차이의 근본 원인에 대한 심층적 인 논의. 이 기사에서는 Console.log 함수의 출력 결과의 차이점을 코드에서 분석하고 그에 따른 이유를 설명합니다. � ...
