Webservice_javascript 기술을 호출하는 XmlHttpRequest 경험 공유

우선, JS용 JSON의 편리성 때문에 JSON을 통해 데이터를 요청하고 반환하는 것을 고려해 보세요. JS에서 xmlHttpRequest 개체를 인스턴스화한 다음 온라인 지침에 따라 주소(asmx 페이지 주소/웹 메서드 이름)를 POST합니다. RequestHeader의 Content-Type을 application/json으로 설정하고 SOAPAction을 웹 메서드 이름으로 설정합니다. 웹 메소드의 매개변수는 JSON 형식으로 전송됩니다.
코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

function getXmlHttp() {
var xmlHttp;
if (window.XMLHttpRequest)
{ // IE7, Firefox, Chrome, Opera, Safari용 코드
xmlHttp = new XMLHttpRequest(); }
else
{ // IE6, IE5용 코드
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP')
}
return xmlHttp; (url, action, data , 성공, 오류, 완료, 실패) {
var xmlHttp = getXmlHttp(); //XMLHttpRequest 객체 가져오기
xmlHttp.open('POST', url '/' action, true ); //비동기 요청 데이터
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4) {
try {
if (xmlHttp.status == 200 && typeof ( 성공) == '함수' ) {
success(xmlHttp.responseText)
}
else if ((xmlHttp.status / 100 == 4 || xmlHttp.status / 100 == 5) && typeof (오류) == ' function') {
error(xmlHttp.responseText, xmlHttp.status)
}
else if (xmlHttp.status / 100 == 200 && typeof (완료) == 'function') {
complete(xmlHttp.responseText, xmlHttp.status)
}
else if (typeof (failed) == 'function') {
failed(xmlHttp.responseText, xmlHttp) .status);
}
}
catch (e) {
}
}
}
xmlHttp.setRequestHeader('Content-Type', 'application/json; charset=utf-8') ;
xmlHttp.setRequestHeader('SOAPAction', action);
xmlHttp.send(data)
}


예: Webservice1에서 HelloWorld 메서드를 호출합니다.

코드 복사 코드는 다음과 같습니다. webservice( '/Webservice1.asmx','HelloWorld','{ }',function (msg) { Alert(msg) })

[System.Web.Script.Services의 주석 처리를 제거하세요. .ScriptService]를 호출한 후 팝업 경고 창을 볼 수 있습니다: {"d": "Hello World"}. Content-Type을 text/xml로 설정하면 경고 창의 내용은 string xmlns="http://tempuri .org; /">Hello World.
이때, "{}" 매개변수는 여전히 JSON 형식이지만 요청은 XML 형식입니다. 그러나 Hello World에는 매개변수가 없으므로 내용의 형식이 무시되고 값이 될 수 있습니다. 정상적으로 돌아왔습니다.

서버측에서 HelloWorld 메소드를 수정하는 경우에는 누군가 문자열 유형 매개변수를 추가하세요.

코드 복사 코드는 다음과 같습니다. [WebMethod]

공개 문자열 HelloWorld (string someone ) {

return "Hello World&Hello, " someone "!"
}


요청자의 Content-Type을 다시 application/json으로 변경하고 전송을 변경합니다. 매개변수를 {"somebody": "Krime"}로 설정하면 팝업 창 콘텐츠를 호출한 후 {d: "Hello World&Hello, Krime!"}이 됩니다.
그러나 이때 Content-Type을 text/xml로 직접 변경하면 호출 후 서버에서 오류를 보고합니다. System.InvalidOperationException: 요청 형식이 잘못되었습니다: text/xml; System.Web.Services.Protocols.HttpServerProtocol.ReadParameters() In System.Web.Services.Protocols.WebServiceHandler.CoreProcessRequest()

따라서 매개변수 형식도 웹서비스 디버깅 페이지의 예에 따라 변경합니다. 매개변수 코드 복사:

코드는 다음과 같습니다.

/somebody>

비누:봉투>


정상적으로 XML 결과를 반환할 수 있어야겠죠? 결과는 예상치 못한 결과였으며 서버는 여전히 동일한 오류를 보고했습니다.
오랜 시간 고생하다 거의 미칠 뻔했습니다. ASP.NET이 갑자기 XML을 이해하지 못하는 것은 아닐까요? 이때 웹서비스 디버깅 페이지의 예를 자세히 살펴보고 마침내 문제를 발견했습니다.

코드 복사 코드는 다음과 같습니다.

POST /WebServiceTest/Webservice1.asmx HTTP/1.1
Host: localhost
Content-Type: text/xml;
콘텐츠 길이: 길이
SOAPAction: "http://tempuri.org/HelloWorld"
;soap:봉투 xmlns:xsi="http ://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http ://schemas.xmlsoap.org/soap /envelope/">


string




위의 POST 주소는 JSON 데이터를 요청할 때와 같이 /가 오고, SOAPAction 메서드 이름 앞에도 네임스페이스가 와야 합니다. 그래서 XMLHttpRequest의 요청 헤더를 수정하고 그에 따라 URL과 작업을 수정한 후 마지막으로 XML 결과를 정상적으로 반환했습니다. Hello World&Hello, Krime! HelloWorldResponse>

나중에 테스트를 계속한 결과 요청 콘텐츠 유형이 application/json인 경우 SOAPAction은 완전히 무시될 수 있지만 / 메서드 이름은 그렇지 않으면 서버가 데이터를 반환하지 않습니다. text/xml을 요청할 때 SOAPAction이 필요하며, URL 뒤에는 네임스페이스가 와야 합니다.
드디어 요약 후 코드가 최종 모습으로 변경되었습니다.

코드 복사 코드는 다음과 같습니다.

function getXmlHttp() {

var xmlHttp
if (window.XMLHttpRequest)
{ // IE7, Firefox, Chrome, Opera, Safari용 코드
xmlHttp = new XMLHttpRequest( );
else
{ // IE6, IE5용 코드
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP')
}
return xmlHttp;
}
function webservice(url, options) {
if (typeof (url) == 'object') { //옵션에 URL 쓰기
options = url
url = url .url
}
if (!url) return;
if (options.dataType.toLowerCase() == 'json') { //JSON 형식으로 데이터를 요청할 때 추가해야 합니다. url "/method name"
url = url '/' options.method;
}
var xmlHttp = getXmlHttp() //XMLHttpRequest 객체 가져오기
xmlHttp.open(' POST', url, true); //비동기 요청 데이터
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4) {
try {
if (xmlHttp.status == 200 && typeof (options.success) == 'function') {
options.success(xmlHttp.responseText)
}
else if ((xmlHttp.status / 100 == 4 || xmlHttp.status / 100 == 5) && typeof (options.error) == 'function') {
options.error(xmlHttp.responseText, xmlHttp.status)
}
else if (xmlHttp .status / 100 = = 200 && typeof (options.complete) == 'function') {
options.complete(xmlHttp.responseText, xmlHttp.status)
}
else if (typeof (옵션) .failed) == '함수') {
options.failed(xmlHttp.responseText, xmlHttp.status)
}
}
catch (e) {
}
}
}
xmlHttp.setRequestHeader('Content-Type', options.contentType); //요청 헤더의 ContentType을 설정합니다.
xmlHttp.setRequestHeader('SOAPAction', options.namespace options.method); //SOAPAction 설정
xmlHttp.send(options.data); //매개변수 데이터 보내기
}


JSON 데이터 요청:

코드 복사 코드는 다음과 같습니다. window.onload = function () {

var data = '{"somebody": "Krime"}';

var options = {
namespace: 'http://tempuri.org/',
method: 'HelloWorld',
contentType: 'application/json; utf-8',
데이터 유형: 'json',
데이터: 데이터,
성공: 함수(msg) {
alert(msg)
}
}; >webservice('http://localhost:8003 /WebServiceTest/Webservice1.asmx', 옵션)
};
XML 데이터 요청:

코드 복사 코드는 다음과 같습니다.

window. onload = function () {
var data = ''
' ''
''
'Krime> ;'
''
''
var options = {
네임스페이스: ' http:// /tempuri.org/',
메서드: 'HelloWorld',
contentType: 'text/xml charset=utf-8',
dataType: 'xml',
data; : 데이터,
성공: 함수(msg) {
경고(msg)
}
}
webservice('http://localhost:8003/WebServiceTest/Webservice1.asmx' , 옵션);
};

테스트는 정상입니다.
한 가지 주의할 점은 JSON 데이터를 요청할 때 반환 유형이 DataTable이면 작동하지 않는다는 것입니다. 해당 데이터 엔터티 클래스의 List

XML 반환 문제를 해결하는 과정에서 또 다른 해결책도 찾았습니다. 특정 작업 중에 ContentType은 application/x-www-form-urlencoded로 설정됩니다. 데이터 본문은 JSON 또는 XML 형식의 SOAP 패키지를 사용하지 않고 QueryString과 유사한 "arguement1=XXX&arguement2=XXX"를 사용합니다. 이 메서드는 각 컨트롤 값을 이름=값 쌍으로 인코딩하고 전송하는 양식 데이터의 HTTP POST 형식을 시뮬레이션합니다.

이 경우 페이지 주소 뒤에 /메서드 이름도 와야 합니다.