이번에는 ajax를 구현하는 3가지 방법을 알려드리겠습니다. ajax 구현 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.
Ajax: 새로운 기술 없이 비동기 통신 대신 비동기 JavaScript 및 Json 개체를 사용하며 이 기술은 브라우저의 창시자인 NetScape에서 처음으로 웹 페이지 요소의 표현을 풍부하게 하기 위해 LiveScript 스크립트 언어를 발명했습니다. 웹 페이지가 동적 효과를 표시할 수 있도록 합니다. 이후의 개정 및 업그레이드를 통해 JavaScript 언어가 탄생했습니다. 동시에 Microsoft는 인터넷의 전망을 보고 인터넷 산업에 참여하기 시작했으며 JScript 언어를 출시했습니다. 불행하게도 JavaScript만큼 성숙하지 않았고 개발이 정체되었습니다. 결국 인터넷에 대한 Microsoft의 의지는 MS가 길고 험난한 NS 인수에 기여했습니다.
여기서 Dynamic Hyper Text Markup Language( Dynamic Hyper Text Markup Language)는 Dom 트리의 요소 노드에 JavaScript를 배치하여 동적 표시 동작을 제공합니다. (2) 웹 프런트 엔드 개발을 위한 두 가지 아이디어:
a. + CSS b. 브라우저 플러그인 ---> Silverlight 4.0(MS)
1. MS의 XHR(XMLHttpRequest)을 핵심으로 합니다.
2. 플래시: MicroMedia ---> Adobe에서 인수 ---> flex(ActionScript와 리치 인터넷 애플리케이션 기술의 결합 포함)3. SilverLight는 flex와 경쟁하기 위해 출시되었습니다. 참고:
백그라운드에서 서버와 비동기적으로 통신할 수 있도록 Microsoft는 두 가지 구성 요소, 즉 서버와의 통신을 담당하는 구성 요소(XMLHTTPRequest)와 XML을 데이터 전달자로 사용하는 XML 처리 구성 요소를 추가했습니다. exchange는 다중 언어 처리에 장점이 있지만 실제로 Json 객체는 일반적으로 Ajax에서 사용됩니다. 클라이언트 브라우저와 서버 간의 데이터 전송 프로세스는 실제로 집합에 의해 완료됩니다. 이런 방식으로 클라이언트 측 JS 언어와 서버 측 C# 언어 간에 데이터를 전송하기 위해 .Net에서는 서버 측 C# 개체 간의 변환을 제공하는Json 직렬화
및 역직렬 변환기를 제공합니다. 및 Json 객체에서는 eval() 함수를 사용하여 서버에서 전달된 Json 문자열을 가져와 Json 객체로 변환할 수 있습니다. (3) Ajax는 어떤 문제를 해결하나요?클라이언트가 서버에서 페이지를 요청하면 서버가 먼저 페이지를 동적으로 계산하고 생성한 다음 클라이언트 브라우저가 순차적으로 컴파일하고 페이지를 렌더링한다는 것을 알고 있습니다. 페이지에 사용자 확인 컨트롤이 있으면 클라이언트 브라우저가 사용자 확인 컨트롤을 제공할 때 서버의 확인 결과를 기다리고 결과를 받은 후에만 페이지 요소를 계속 렌더링할 수 있습니다. 그리고 이 확인 프로세스에는 일반적으로 다음과 같은 작업이 필요합니다. 소위 동기화 방법인 데이터베이스 읽기 Ajax 사용 후: 이것도 확인 제어이며 클라이언트가 확인 요청을 제출한 후입니다. 즉, 다른 요소는 계속해서 순차적으로 표시됩니다. 검증 결과를 얻으면 메모리의 DOM 개체가 클라이언트 측에서 javascript에 의해 수정되어 사용자에게 표시됩니다. (참고: 여기서 수정되는 것은 DOM 개체뿐입니다. 클라이언트가 수신한 메모리 및 페이지 파일은 수정되지 않았습니다.) 이러한 방식으로 비동기 방식을 사용하면 일시 중단된 상태가 없으며 클라이언트는 서버가 결과를 반환할 때까지 기다리는 시간도 절약합니다. .
(4) Ajax 구현(3의 Ajax 구현에 대해 설명해야 합니다. Ajax가 얻을 수 있는 효과는 WebService를 통해 얻을 수 있습니다.)1. : a.new b.onreadystatechange (responseText 처리) c.open( get 메소드 및 post 메소드) d.send (동기 호출: a.new b.open (get 메소드 및 post 메소드) c.send d.responseText)
//ajax.html
<!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>
<title>Ajax of Javascript & jQuery</title>
</head>
<body>
<a href="javascript:getData();">Javascript-Ajax: Click me</a><br />
<br />
<br />
<input id="btn" type="button" value="jQuery-Ajax: Clike me"/>
<hr />
<p id="show">
</p>
<script type="text/javascript">
function getData() {
//创建XMLHttpRequest通信对象
var xhr;
if (window.ActiveXObject) { //标准情况下, 只能有两个ActiveXObject对象处理通信过程
xhr =new ActiveXObject("Microsoft.XMLHTTP");
}
elseif (window.XMLHttpRequest) {
xhr =new XMLHttpRequest();
}
else {
thrownew Error("Ajax is not supported by this browser");
}
var elem = document.getElementById("show"); //用来显示处理结果
//使用onreadystatechange事件处理结果
xhr.onreadystatechange =function() {
if (xhr.readyState ==4) { // readyState表示服务器响应状态. 4: 响应接收完毕
if (xhr.status ==200) { // status 表示 http 请求的状态
var json = xhr.responseText; //从请求中回应中获得json串
var obj = eval("("+ json +")"); // 借助 eval 将 json 串转化为对象, 在客户端浏览器必须解析为js对象
elem.innerHTML ="<span>"+ obj.name +"</span>";
}
}
}
//通过open设置请求方式
xhr.open("get", "json.ashx", true); //默认为ture, false表示同步方式
//发送请求
xhr.send(null);
/* 同步方式, false表示不适用异步方式
xhr.open("get", "json.ashx", false);
xhr.send(null);
//处理结果
alert(xhr.responseText);
*/
}
</script>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() { //ready函数, 脚本加载完即执行, 也可以用$(...$("#btn").click...)();加载
$("#btn").click(function showData() { //按钮上添加onclick事件, 事件处理方法为showData()
$("#show").load("jquery.ashx"); //从jquery.ashx中获取数据元素(innerHTML的内容), 并显示在p中
});
});
</script>
</body>
</html>그런 다음 관련 데이터(예: 도면 달력, 데이터베이스 확인 등)를 제공하기 위해 json.ashx와 유사한 일반 핸들러를 프로젝트에 추가해야 합니다.
//json.ashx
<%@ WebHandler Language="C#" Class="Json"%>
using System;
using System.Web;
publicclass Json : IHttpHandler {
publicvoid ProcessRequest (HttpContext context) {
context.Response.ContentType ="text/plain";
//对于静态内容, 需要禁用浏览器的缓存, 否则老是旧结果
context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
string name ="Mike";
string jsonFormat ="{{ \"name\": \"{0}\" }}"; //{{、}}是为了避免和Json中的{冲突而采用的特殊转义符
string json =string.Format(jsonFormat, name);
context.Response.Output.Write(json);
}
publicbool IsReusable {
get {
returnfalse;
}
}
}// jquery. ashx
<%@ WebHandler Language="C#" Class="jquery"%>
using System;
using System.Web;
publicclass jquery : IHttpHandler {
publicvoid ProcessRequest (HttpContext context) {
context.Response.ContentType ="text/plain";
context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
DateTime now = DateTime.Now;
string jqueryFormat ="<span>{0}</span>";
string jquery =string.Format(jqueryFormat, now);
context.Response.Write(jquery);
}
publicbool IsReusable {
get {
returnfalse;
}
}
}2.1 AjaxPro2 사용:
a.AjaxPro2 클래스 라이브러리(AjaxPro2.dll) 추가 b.webconfig에서 구성 파일 추가 c.App_Code에서 클래스 라이브러리 파일(cs 파일)을 생성하여 Ajax 서비스 제공 및 등록 페이지에 해당하는 백그라운드 cs 파일의 Ajax(Page_Load 이벤트) d. App_Code의 클래스 라이브러리 파일(cs 파일 내)에 Ajax 태그를 사용하여 처리 방법을 작성합니다. e. 포그라운드의 aspx 파일에서 스크립트 처리를 사용합니다. 결과(메모리의 DOM 개체 수정)가 페이지에 표시됩니다
//b.webconfig<location path="ajaxpro"> <system.web> <httpHandlers> <add verb="*" path="*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/> </httpHandlers> <!-- If you need to have Ajax.NET Professional methods running on the login page you may have to enable your own authorization configuration here. --> <!-- <authorization> <deny users="?"/> </authorization> --> </system.web> </location>
protectedvoid Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(CalendarServices)); //AjaxPro会根据注册的类型自动生成脚本
}//CalendarServices.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
publicclass CalendarServices
{
[AjaxPro.AjaxMethod]
publicbool save(string date, string tile, string detail)
{
System.Threading.Thread.Sleep(5000); //用来测试异步
returntrue; //这里为简单, 直接返回true
}
}<%@ 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>
</head>
<body>
<form id="form1" runat="server">
<p>
日期:<input id="date" type="text"/><br />
标题:<input id="title" type="text"/><br />
详情:<textarea id="detail" cols="80" rows="5"></textarea>
<hr />
<input id="btn" type="button" value="确定"/>
</p>
<p>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#btn").click(function() {
var date = $("#date").val();
var title = $("#title").val();
var detail = $("#detail").val();
//由AjaxPro生成的js代理, 很像C#中类库的使用, 其中function(result)是异步的结果处理方法
CalendarServices.save(date, title, detail, function(result) {
if (result.error !=null) { //服务器上出现异常
alert(result.error.Message);
}
if (result.value) { //服务器cs文件中的方法返回永真
alert("服务器返回true! ");
}
});
});
});
</script>
</p>
</form>
</body>
</html><httpHandlers> <add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax"/> </httpHandlers>
Ajax.Utility.RegisterTypeForAjax(typeof(SysBase_UserEdit)); //SysBase_UserEdit是页面文件名称
//d. App_Code
[Ajax.AjaxMethod]
public DataSet getRoleData(int Roleid)
{
DataSet ds =new DataSet();
ds = r.SelectRoleData(string.Format(" and id={0}", Roleid));
return ds;
}//e의 CS 파일에 있는 Ajax 태그를 사용한 처리 방법
this.DDLRole.Attributes.Add("onpropertychange", "onCommandInputPropertyChange();"); //在Page_Load事件中基于Attribute为按钮绑定方法, 在aspx文件中手动添加也可以//f. VS2008 통합 Ajax:
a. VS2005의 경우 플러그인(Microsoft ASP.NET 2.0 AJAX Extensions)을 설치해야 합니다. b. 새로 고칠 테이블 요소의 시작 부분에 ScriptManager 컨트롤을 배치합니다. UpdatePanel 및 ContentTemplate d. 테이블 요소 끝에 ContentTemplate과 UpdatePanel 사이에 트리거 요소를 배치하고 Ajax 트리거 버튼을 등록합니다. e. 클래스 라이브러리 Ajax2 f.VS2005를 참조하려면 webConfig
//d를 구성해야 합니다. 테이블 요소 끝의 ContentTemplate과 UpdatePanel 사이에 Ajax 트리거 버튼을 등록합니다(btn_Search, btn_Delete는 버튼입니다)
<script>
function onCommandInputPropertyChange(){
if (event.propertyName == "value"){
var cmdInput = event.srcElement;
if (cmdInput.value != 0){
//alert(cmdInput.value);
BindRoleName(cmdInput.value);
}
}
}
//绑定角色名
function BindRoleName(RoleID){
//SysBase_UserEdit是aspx页面的名称
SysBase_UserEdit.getRoleData(RoleID,get_AllName);
}
function get_AllName(response){
var AllName = document.getElementById("DDLAjax");
AllName.length = 0;
if (response.value != null){
var ds = response.value;
if(ds != null && typeof(ds) == "object"){
var name = ds.Tables[0].Rows[0].rolename;
var id = ds.Tables[0].Rows[0].id;
AllName.options.add(new Option(name,id));
}
}
}
</script>//f VS2005는 webConfig
<Triggers> <asp:AsyncPostBackTrigger ControlID="AspNetPager1"/> <asp:AsyncPostBackTrigger ControlID="btn_Search"/> <asp:AsyncPostBackTrigger ControlID="btn_Delete"/> </Triggers>
=========를 구성해야 합니다. ===================== 구분선============================ =
첫 번째 유형에 대해: Js에서 Ajax 비동기 호출에 대해 뭔가를 추가할 것이며 별도로 시작하지 않을 것입니다
매개변수 전달에 대해:
1.get 모드에서 매개변수를 전달하며 매개변수는 예를 들어 URL에 저장됩니다.
xhr.open("get", "json.ashx?name=xxx", true);xhr.send(null);
2.
xhr.send("xxx" );
xhr.send("name=xxx");
키-값 쌍이 아닌 쌍: context.Request.InputStream을 사용하여 다음과 같은 정보를 얻습니다.
<httpHandlers> <!-- 调用AjaxPro.2--> <add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/> <remove verb="*" path="*.asmx"/> <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/> </httpHandlers>
인코딩 변환과 관련된 경우 직접 조정해야 합니다.
키-값 쌍: 사용 context.Request.Form["name"] ... Get
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!
추천 자료:
Ajax 콜백으로 새 양식을 열 때 브라우저가 가로채는 것을 방지하는 방법위 내용은 Ajax를 구현하는 3가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
