Ajax()방법 은 배경 과 어떻게 상호작용 합 니까?

5237 단어 ajax상호 작용
Ajax 는'Asynchronous JavaScript and XML'(비동기 JavaScript 와 XML)이 라 고 불 리 며 인 터 랙 티 브 웹 애플 리 케 이 션 을 만 드 는 웹 개발 기술 을 말한다.Ajax 기술 은 현재 브 라 우 저 에서 JavaScript 스 크 립 트 를 통 해 사용 할 수 있 는 모든 기술 의 집합 입 니 다.Ajax 는 이러한 모든 기술 을 새로운 방식 으로 사용 하여 오래된 B/S 방식 의 웹 개발 에 새로운 활력 을 불 어 넣 었 다.
ajax()방법 은 jQuery 바 텀 ajax 로 이 루어 집 니 다.HTTP 를 통 해 원 격 데 이 터 를 불 러 오 라 고 요청 합 니 다.

$.ajax({
type: "GET",
url: "handleAjaxRequest.action",
data: {paramKey:paramValue},
async: true,
dataType:"json",
success: function(returnedData) {
alert(returnedData);
//          
//returnedData--      ,    dataType           ;
//             
},
error: function(e) {
alert(e);
//          
}
});
}
매개 변수 설명:
type:"POST"또는"GET",기본 값 은"GET"입 니 다.
url:요청 한 주 소 를 보 냅 니 다.
data:서버 에 전달 할 데이터 입 니 다.key:value 형식 으로 작성 되 었 습 니 다(id:1).GET 요청 은 url 뒤에 추 가 됩 니 다.
async:기본 true,비동기 요청,false 로 설정 하면 동기 요청 입 니 다.
dataType:예상 서버 가 되 돌아 오 는 데이터 형식 입 니 다.지정 하지 않 아 도 됩 니 다.xml,html,text 등 이 있 습 니 다.
개발 에서 상기 매개 변 수 를 사용 하면 기본 적 인 수 요 를 만족 시 킬 수 있다.
서버 에 중국어 인 자 를 전달 하려 면 url 뒤에 인 자 를 쓰 고 encodeURI 로 인 코딩 하면 됩 니 다.

var chinese = "  ";
var urlTemp = "handleAjaxRequest.action?chinese="+chinese;
var url = encodeURI(urlTemp);//    
$.ajax({
type: "GET",
url: url,//       url
success: function(returnedData) {
alert(returnedData);
//          
//returnedData--      ,    dataType           ;
//             
},
error: function(e) {
alert(e);
//          
}
});
} 
struts 2 의 action 요청 처리:

public void handleAjaxRequest() {
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
//       html    
response.setContentType("text/html;charset=utf-");
response.setHeader("pragma", "no-cache");
response.setHeader("cache-control", "no-cache");
PrintWriter out =null;
try {
String chinese = request.getParameter("chinese");
//      ,      
chinese = new String(chinese.getBytes("ISO--"),"utf-");
System.out.println("chinese is : "+chinese);
//    
String resultData = "hello world";
out = response.getWriter();
out.write(resultData);
//    json  ,response.setContentType("application/json;charset=utf-");
//Gson gson = new Gson();
//String result = gson.toJson(resultData);// Gson      json  
//out.write(result);
out.flush();
}catch(Exception e) {
e.printStackTrace();
}finally {
if(out != null) {
out.close();
}
}
}
struts.xml 프로필:되 돌아 오 는 형식 을 쓸 필요 가 없습니다.

<action name="handleAjaxRequest" class="com.test.TestAction"
method="handleAjaxRequest">
</action>
AJAX 앞 배경 대화 법 공유
주:ajax 는 async 매개 변 수 를 통 해 비동기 인지 동기 인지,false 동기 화,true 비동기 인지 결정 합 니 다.
비동기 실행 순 서 는 후속 동작 을 먼저 실행 한 다음 에 success 코드 를 실행 하 는 것 이다.
동기 화 는 먼저 success 코드 를 실행 한 다음 에 후속 코드 를 실행 하 는 것 이다.
인증:동기 화 할 때 데이터 양 이 많 으 면 멈 추 지 않 습 니까?예 를 들 어 배경 에서 대량의 데 이 터 를 검색 할 때 페이지 가 끊 겨 죽 습 니까?
1.(비동기)방법 호출,후속 코드 는 실행 결 과 를 기다 릴 필요 가 없습니다.
배경:

using System.Web.Script.Services; 
public static string GetStr(string str1, string str2) 
{ 
return str1 + str2; 
}
프론트:

function Test(strMsg1,strMsg2) 
{
$.ajax({
type: "Post",
url: "Demo.aspx/GetStr",
async: true,
//           ,     ,     ,      ,str1      ,str2          
data: "{'str1':'"+strMsg1+"','str2':'"+strMsg2+"'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
//      data.d     
alert(data.d);
},
error: function(err) {
alert(err);
}
});
  //      
$("#pageloading").hide();
}
2.(동기 화)방법 호출,반환 값 을 받 아야 하 는 것 은 후속 코드 를 실행 하 는 전제 조건 입 니 다.
배경:

using System.Web.Script.Services; 
public static string GetStr(string str1, string str2) 
{ 
return str1 + str2; 
}
프론트:

function Test(strMsg1,strMsg2) 
{
 var str = “”;
$.ajax({
type: "Post",
url: "Demo.aspx/GetStr",
async: false,
//           ,     ,     ,      ,str1      ,str2          
data: "{'str1':'"+strMsg1+"','str2':'"+strMsg2+"'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
//      data.d     
str = data.d;
},
error: function(err) {
alert(err);
}
});
 return str;

좋은 웹페이지 즐겨찾기