Makes the page refreshing AJAX, ASP. NET core knowledge (9), ajaxasp.net

Makes the page refreshing AJAX, ASP. NET core knowledge (9), ajaxasp.net
AJAX Introduction

1. If there is no AJAX

Common ASP.. Net refreshes the current page every time the server method is executed. Without ajax, you cannot submit comments during the video watching by youku. The page is refreshed and the video is interrupted.

2. About AJAX

AJAX is a technology that performs partial asynchronous page refreshing. Use AJAX to send requests to the server and obtain the data returned by the server and update the data to the interface. Instead of refreshing the entire page, use JavaScript to create XMLHTTPRequest (XHR for short) on the HTML page) object To send a request to the server and obtain the returned data. XMLHTTPRequest in the page sends an Http request and obtains the returned data from the server, so that the page will not be refreshed. XMLHTTPRequest is the core object of AJAX.

Partial: a small part is refreshed, while other parts are not refreshed;

Asynchronous: the browser is not stuck during network requests.

 

XMLHTTPRequest

1. Use XMLHTTPRequest

// Create an XMLHTTP object and consider compatibility with var xmlhttp = window. XMLHttpRequest? New XMLHttpRequest (): new ActiveXObject ('Microsoft. XMLHTTP '); // "prepare" to send a Post request to the server's GetDate1.ashx (GET may cause cache problems) // the browser will not cache the Post request. No request has been sent. True indicates an asynchronous request. Xmlhttp. open ("POST", "AJAXTest. ashx? I = 5 & j = 10 ", true); xmlhttp. onreadystatechange = function () {// readyState = 4 indicates that the server has returned complete data. May have gone through // 2 (the request has been sent and is being processed), // 3 (some data in the response is available, but the server has not yet completed the response generation) if (xmlhttp. readyState = 4) {// if the status code is 200, if (xmlhttp. status = 200) {alert (xmlhttp. responseText);} else {alert ("error returned by AJAX server! ") ;}}// Do not think that if (xmlhttp. readyState = 4) {execute before sending !!!! Xmlhttp. send (); // at this time, the system starts to send the request. // after the request is sent, the server will continue to execute the operation without blocking and the interface will not be stuck, this is the meaning of "A" in AJAX: "Asynchronous ". Try to add Thread. Sleep (3000) in ashx );

 

2. Simple Encapsulation

// Url: request URL, // onsuccess: processing after the request is successful, // onfail: processing function ajax after the request fails (url, onsuccess, onfail) {var xmlhttp = window. XMLHttpRequest? New XMLHttpRequest (): new ActiveXObject ('Microsoft. XMLHTTP '); xmlhttp. open ("POST", url, true); xmlhttp. onreadystatechange = function () {if (xmlhttp. readyState = 4) {if (xmlhttp. status = 200) {onsuccess (xmlhttp. responseText);} else {onfail (xmlhttp. status) ;}} xmlhttp. send (); // send the request only at this moment}

After calling Ajax, you can

Ajax ("test. ashx", function () {// function to be processed when the request returns a successful result ...}, Function () {// the function to be processed when the request fails ...})

Json

1. What is Json?

AJAX transmits complex data. If you define the format yourself, it will undergo assembly and parsing. Therefore, AJAX has a de facto standard JSon for data transmission. Json (a standard, just like XML, Json specifies the format in which an object is saved as a string) serializes a complex object into a string, in the browser, the string is deserialized into objects that can be read by JavaScript. Json is supported in almost all languages. Json is a standard that represents objects (js, java, and. net) as strings.

2.Format

What is Json? Json is a javascript object or a string in array format. Http cannot transmit JavaScript objects, so it must be converted to strings for transmission.

JavaScript Object (key-Value Pair) var person = {name: 'upeng', age: 8 };

JavaScript array: var names = ['upeng', 'qq', 'taobao'];

JavaScript Object array: var persons = [{name: 'upeng', age: 8}, {name: 'qq', age: 15}, {name: 'taobao ', age: 10}];

JavaScript Object Association: var p = {name: 'yzk', child: {name: 'timi ', age: 1 }};

All of the above can be converted to Json.

3. Conversion 

1) how to convert a json string to a js object:

Var obj = eval ("a (" + data + ")"). Example: common objects, arrays, object arrays, and multi-object associations.

2) C # serialize A. Net object to a Json string:

JavaScriptSerializer (). Serialize (p ).. Net object → json string → JavaScript Object.

JavaScriptSerializer is in System. Web. Extensions. dll. Json. Net

3) Anonymous class in C #: var p = new {Id = 5, Name = "rupeng"}. We can see through decompilation that a class is actually generated.

 

JQuery AJAX

1. $. ajax

// Jquery encapsulation simplifies AJAX, including $. get, $. post, and other methods with different effects. Here we will introduce the most commonly used $. ajax (to obtain the message of request failure ).

$. Ajax ({

Type: "post ",

Url: "Ajax1.ashx ",

Data: {i1 :$ ("# txt1"). val (), i2: $ ("# txt2"). val ()},

Success: function (data, txtStatus) {alert (data );},

Error: function () {alert ("error ");}

});

// The parameters of the ajax method are a dictionary,

// It is best to set post submission

// Data is the submitted report style

// Success indicates a successful Request Processing Event

// Error indicates the Processing Event of request communication failure (server error, 404, etc)

2. JQuery AJAX Json Processing

1) You can use $. parseJSON () to parse json strings into JavaScript objects, which is safer than eval.

2) If the ContentType of the ajax request is set to "application/json" or the dataType: "json" is set in the ajax request, the first parameter of success is the JavaScript Object and does not need to be manually parsed.