Shulou(Shulou.com)06/03 Report--

This article mainly introduces the Ajax and JSON example analysis, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

1.1.1 Summary

The core of Ajax technology is the XMLHttpRequest object (referred to as XHR), which can obtain the data from the server by using the XHR object, and then insert the data into the page and present it through DOM. Although the name contains XML, the Ajax communication has nothing to do with the data format, so our data format can be XML or JSON.

The XMLHttpRequest object is used to exchange data with the server in the background. The specific functions are as follows:

Update a web page without reloading the page

Request data from the server after the page has been loaded

Receive data from the server after the page has been loaded

Send data to the server in the background

1.1.2 text

XMLHttpRequest is a JavaScript object designed by Microsoft and adopted by Mozilla, Apple, and Google, and is being standardized by the W3C. It provides an easy way to retrieve data in URL.

To create a XMLHttpRequest instance, we only need to new one OK:

The copy code is as follows:

/ Creates a XMLHttpRequest object.

Var req = new XMLHttpRequest ()

Someone might say, "you can't do that! IE6 does not support the original XHR object." indeed, we will introduce methods that support IE6 or older versions of creating XHR objects later.

The usage of XMLHttpRequest

After creating the XHR object, we then call an initialization method, open (), which accepts five parameters as defined as follows:

The copy code is as follows:

Void open (

DOMString method, / / "GET", "POST", "PUT", "DELETE"

DOMString url

Optional boolean async

Optional DOMString user

Optional DOMString password

);

From the above definition, we know that the signature of the open () method contains five parameters, of which the parameters method and url address are required. Suppose we send a GET request for URL: myxhrtest.aspx to obtain data, as defined as follows:

The copy code is as follows:

Var req = new XMLHttpRequest ()

Req.open (

"GET"

"myxhrtest.aspx"

False

);

The above code initiates a GET request for myxhrtest.aspx. There are two things to note here: one is that the URL is relative to the current page where the code is executed (using an absolute path); and the other is that calling the open () method does not actually send the request, but just initiates a request to be sent.

Requests can only be sent to URL in the same domain that use the same port and protocol; if there is any difference between URL and the page that initiated the request, a security error will be raised.

To actually send the request using the send () method, the send () method takes a parameter that is the data to be sent as the request body, and if you don't need to send the data through the request body, we must pass a null value. After calling send (), the request is dispatched to the server. The complete Ajax request code is as follows:

The copy code is as follows:

Var req = new XMLHttpRequest ()

Req.open (

"GET"

"myxhrtest.aspx"

False

);

Req.send (null)

After sending the request, we need to check whether the request was executed successfully. First of all, we can judge by the status attribute. Generally speaking, we can use the HTTP status code of200 as a success sign. At this point, the response body content is saved to the responseText. In addition, a status code of 304indicates that the requested resource has not been modified and the data cached by the browser can be used directly. The synchronization request code for Ajax is as follows:

The copy code is as follows:

If (req! = null) {

Req.onreadystatechange = function () {

If ((req.status > = 200 & & req.status)

< 300) || req.status == 304) { //// Do something. } else { alert("Request was unsuccessful: " + req.status); } }; req.open("GET", "www.myxhrtest.aspx", true); req.send(null); } 前面我们定义了Ajax的同步请求，如果我们发送异步请求，那么在请求过程中javascript代码会继续执行，这时可以通过readyState属性判断请求的状态，当readyState = 4时，表示收到全部响应数据，属性值的定义如下： readyState值 描述 0 未初始化；尚未调用open()方法 1 启动；尚未调用send()方法 2 已发送；但尚未收到响应 3 接收；已经收到部分响应数据 4 完成；收到全部响应数据 表1 readyState属性值 同步请求：发生请求后，要等待服务器执行完毕才继续执行当前代码。 异步请求：发生请求后，无需等到服务器执行完毕，可以继续执行当前代码。 现在我们要增加判断readyState属性值，当readyState = 4时，表示全部数据接收完成， 所以Ajax的异步请求代码如下： 复制代码 代码如下: if (req != null) { req.onreadystatechange = function() { //// Checks the asyn request completed or not. if (req.readyState == 4) { if ((req.status >

& & req.status

< 300) || req.status == 304) { //// Do something. } else { alert("Request was unsuccessful: " + req.status); } } }; req.open("GET", "www.myxhrtest.aspx", true); req.send(null); } Ajax同源请求 现在我们对Ajax的请求实现有了初步的了解，接下来我们将通过具体的例子说明Ajax请求的应用场合和局限。 在日常网络生活中，我们在浏览器的地址中输入要访问的URL并且回车，浏览器会向服务器发送请求，当服务器收到请求后，把相应的请求页面发送回浏览器，我们会发现页面大部分加载完毕，有些还没有加载完毕。总得来说，采用异步加载方式不会影响已加载完毕的页面浏览，我们可以通过Ajax实现异步加载。 这里我们以AdventureWorks数据库为例，把产品表（Product）中的数据通过报表呈现给用户，我们可以通过多种方法实现该报表需求，这里我们将通过Ajax实现该功能。 首先，我们要把后台数据转换为JSON格式，接下来我们定义Product表的数据库访问对象（DAO），具体的实现代码如下： 复制代码 代码如下: /// /// The product datatable dao. /// public class ProductDao { /// /// Initializes a new instance of the class. /// public ProductDao() { } /// /// Gets or sets the product id. /// public int Id { get; set; } /// /// Gets or sets the product name. /// public string Name { get; set; } /// /// Gets or sets the product serial number. /// public string SerialNumber { get; set; } /// /// Gets or sets the product qty. /// public short Qty { get; set; } } 前面我们定义了Product表的数据库访问对象--ProductDao，它包含四个属性分别是产品的Id，名称，序列号和销售数量。 接下来，让我们实现Product表的数据库操作类。 复制代码 代码如下: /// /// Product table data access manager. /// public class ProductManager { /// /// The query sql. /// private const string Query = "SELECT ProductID, Name, ProductNumber, SafetyStockLevel FROM Production.Product"; /// /// Stores the object of into list. /// private IList _products = new List(); /// /// Gets all products in product table. /// /// /// The list of object. /// public IList GetAllProducts() { using (var con = new SqlConnection(ConfigurationManager.ConnectionStrings["SQLCONN"].ToString())) using (var com = new SqlCommand(Query, con)) { con.Open(); using (var reader = com.ExecuteReader(CommandBehavior.CloseConnection)) { while (reader.Read()) { var product = new ProductDao { Id = (int)reader["ProductID"], Name = (string)reader["Name"], SerialNumber = (string)reader["ProductNumber"], Qty = (short)reader["SafetyStockLevel"] }; _products.Add(product); } } } return _products; } } 前面我们实现了Product表的数据库操作类--ProductManager，它包含两个私有字段Quey和_products，还有一个获取Product表中数据的方法--GetAllProducts()。 通过实现ProductDao和ProductManager，而且我们提供GetAllProducts()方法，获取Product表中的数据，接下来我们要调用该方法获取数据。 为了使数据通过JSON格式传递给页面，这里我们要创建一般处理程序（ASHX文件）， 一般处理程序适用场合： 创建动态图片 返回REST风格的XML或JSON数据 自定义HTML

Figure 1 General processor

When you add a generic handler file to your project, you add a file with a .ashx extension. Now let's create a generic handler, ProductInfo, as follows:

The copy code is as follows:

Using System.Runtime.Serialization.Json

Using System.Web

Using ASP.App_Code

/ / /

/ The product data handler.

/ / /

Public class ProductInfo: IHttpHandler {

Public void ProcessRequest (HttpContext context) {

Context.Response.ContentType = "application/json"

/ / Creates an oject.

Var manager = new ProductManager ()

/ / Invokes the GetAllProducts method.

Var products = manager.GetAllProducts ()

/ / Serializes data to json format.

Var json = new DataContractJsonSerializer (products.GetType ())

Json.WriteObject (context.Response.OutputStream, products)

}

/ / Whether can resuable by other handler or not.

Public bool IsReusable {

Get {

Return false

}

}

}

Notice that the ProductInfo class implements the IHttpHandler interface, which contains a method ProcessRequest () method and a property IsReusable. The ProcessRequest () method is used to process inbound Http requests. By default, the ProductInfo class changes the content type to application/json, and then we write the data to the input stream in JSON format; the IsReusable property indicates whether the same handler can be used for multiple requests, here we set it to false, and it can also be set to true to improve performance.

As shown in the following figure, we successfully get the data into the response stream through the ProductInfo class and display it in JSON format.

Figure 2 Http request

When we request ProductInfo, it first calls the ProcessRequest () method, then calls the GetAllProducts () method to get the data from the database, and then writes the data to the response stream in JSON format.

Now that we have successfully written the data to the response stream in JSON format, we will request the data through Ajax and display it on the page.

First of all, we define the method createXHR () to create XMLHttpRequest objects. We mentioned earlier that IE6 or older versions do not support the XMLHttpRequest () method to create XMLHttpRequest objects, so we need to add to the createXHR () method to determine whether the current browser is IE6 or older, and if so, through an ActiveX object in the MSXML library. Therefore, you may encounter three different versions of XHR objects (MSXML2.XMLHttp6.0,MSXML2.XMLHttp3.0 and MSXML2.XMLHttp) in IE.

The copy code is as follows:

/ / Creates a XMLHttpRequest object bases on web broswer.

Function createXHR () {

/ / Checks whether support XMLHttpRequest or not.

If (typeof XMLHttpRequest! = "undefined") {

Return new XMLHttpRequest ()

}

/ / IE6 and elder version.

Else if (typeof ActiveXObject! = "undefined") {

If (typeof arguments.callee.activeXString! = "string") {

Var versions = [

"MSXML2.XMLHttp6.0"

"MSXML2.XMLHttp3.0"

"MSXML2.XMLHttp"]

For (var I = 0; I

< versions.length; i++) { try { var xhr = new ActiveXObject(versions[i]); arguments.callee.activeXString = versions[i]; return xhr; } catch (ex) { throw new Error(ex.toString()); } } return new ActiveXObject(arguments.callee.activeXString); } else { throw new Error("No XHR object available"); } } return null; } $(document).ready(function() { GetDataFromServer(); }); 前面我们定义了一个比较通用的方法用来创建XMLHttpRequest对象，并且它支持IE6或更老版本创建XMLHttpRequest对象，接下来我们将通过Ajax方法请求数据。 复制代码 代码如下: function GetDataFromServer() { // Creates a XMLHttpRequest object. var req = new createXHR(); if (req != null) { req.onreadystatechange = function() { if (req.readyState == 4) { if ((req.status >

= 200 & & req.status < 300) | | req.status = = 304) {

/ alert (req.responseText)

Var jsonTextDiv = document.getElementById ("jsonText")

/ / Deserializes JavaScript Object Notation (JSON) text to produce a JavaScript value.

Var data = JSON.parse (req.responseText)

For (var I = 0; I < data.length; iTunes +) {

Var item = data [I]

Var div = document.createElement ("div")

Div.setAttribute ("class", "dataItem")

/ / Inserts data into the html.

Div [XSS _ clean] = item.Name + "sold" + item.Qty + "; Product number:" + item.SerialNumber

JsonTextDiv.appendChild (div)

}

}

Else {

Alert ("Request was unsuccessful:" + req.status)

}

}

}

/ / Sends an asyn request.

Req.open ("GET", "ProductInfo.ashx", true)

Req.send (null)

}

}

Since we have previously introduced the method of making a request in Ajax, we will not repeat it, but we notice that in the GetDataFromServer () method, we get the responseText data (in JSON format), then convert the JSON format data into Javascript objects through the parse () method, and finally insert the data into div. The page is rendered as follows:

Figure 3 Ajax request result

Now that we have successfully output the data to the page, maybe the user will feel that the user experience is not good, so we add CSS style to the page.

Due to the time constraint, we have defined the CSS style as follows:

The copy code is as follows:

# header {

Width: 100%

Margin-left: 10px

Margin-right: 10px

Background-color:#480082

Color: # FFFFFF

}

Body {

Margin-left: 40px

Margin-right: 40px

}

Div#jsonText {

Background-color: # d9d9d9

-webkit-border-radius: 6px

Border-radius: 6px

Margin: 10px 0px 0px 0px

Padding: 0px

Border: 1px solid # d9d9d9

}

Div.dataItem {

Font-family: Verdana, Helvetica, sans-serif

Color: # 434343

Padding: 10px

}

Div.dataItem:nth-child (2n) {

Background-color: # fafafa

}

Div.dataItem:first-child {

-webkit-border-top-left-radius: 6px

-webkit-border-top-right-radius: 6px

Border-top-left-radius: 6px

Border-top-right-radius: 6px

}

Div.dataItem:last-child {

-webkit-border-bottom-left-radius: 6px

-webkit-border-bottom-right-radius: 6px

Border-bottom-left-radius: 6px

Border-bottom-right-radius: 6px

}

Let's refresh the page, the OK page is much better now.

Figure 4 Ajax request result

Homologous strategy and cross-source strategy

Above, we obtain the page and data in the case of the same origin request, that is, the page and data requested by the client browser belong to the same domain name, the same port and the same protocol.

Same origin policy: prevents scripts loaded from one domain from getting or manipulating document properties on another domain. That is, the domain of the requested URL must be the same as the domain and port of the current Web page. This means that browsers isolate content from different sources to prevent operations between them.

Figure 5 homologous request process

In some cases, we inevitably need to request data across domains from other domain names or servers, but as mentioned earlier, Ajax can only send requests to URL in the same domain that use the same port and protocol; if there is any difference between URL and the page that initiated the request, it will cause a security error.

Cross-Source Policy (CORS): a Web browser technical specification that defines a way for a Web server to allow other domain name pages to access its resources. The cross-source policy defines a method that allows the browser and the server to interact to decide whether to allow cross-source requests.

Figure 6 Cross-source request process

You may be a little confused when you notice that we use the JSON format in the same origin request, but use JSONP in the cross-source request, but it's the same when I started learning.

First of all, we must understand the difference between JSON and JSONP: JSON is a data format, and JSONP seems to encapsulate JSON format through a method name; because the browser allows cross-source requests for resources, such as our HTML page code using Google's jQuery library, when our Web program sends cross-source requests, the server provides us with response data, but the server can not predict the name of the method to accept JSON data, so we have to provide a method name.

Ajax cross-source request

The main solutions for cross-domain request data are as follows:

JSONP mode

Form POST mode

Server proxy

XDomainRequest of Html5

Flash request

Before introducing the JSONP approach to cross-domain request data, let's first take a look at the definition of JSONP.

JSONP (JSON with Padding) is an unofficial protocol that allows integration of Script tags on the server side to return to the client for cross-domain access in the form of Javascript callback (this is only a simple implementation of JSONP).

Due to the limitation of the same origin policy, XMLHttpRequest only allows you to request resources from the current source (domain name, protocol, port). In order to achieve cross-domain requests, you can implement cross-domain requests through script tags, and then output JSON data on the server and execute callback functions, thus solving cross-domain data requests.

Suppose the blog park provides an API interface: http://www.cnblogs.com/hotblogs/json?, which developers can call to get popular blog posts.

Here, we can call the API in two ways:

1. Define callback function with Javascript

In fact, it is straightforward to call this API through the callback function defined by Javascript. We only need to tell the server the name of the method to receive the data, such as:

Http://www.cnblogs.com/hotblogs/json? Callback=myFunction

MyFunction is the function we defined on the page to receive the data returned by the server. MyFunction is defined as follows:

The copy code is as follows:

/ / The call back function.

Function myFunction (data) {

/ / Your code here.

}

two。 Using the Ajax method of jQuery

Suppose we want to add public Weibo information displaying Sina Weibo in our blog. We can call API provided by Weibo in the blog to obtain cross-source data. Next, we will use jQuery's Ajax method to obtain cross-domain data.

First of all, look at Weibo API documents to find the API interface of Public Weibo statuses/public_timeline to get the latest public Weibo messages, which supports JSON or XML format data.

Parameters.

Required

Type and scope

Description

Source

True

String

The AppKey assigned when the application is applied, and the unique identity of the application is represented when the API is called. (this parameter is not required for OAuth authorization)

Count

False

Int, with a default value of 20 and a maximum of 200

Number of records returned each time

Count

False

Int, with a default value of 20 and a maximum of 200

Number of records returned each time

Table 2 request parameters

Only source (AppKey) is required for the above request parameters, so we need to apply for AppKey from Weibo. When calling API, we just need to pass our AppKey to the API OK.

Next, let's take a look at the data composition of Weibo. Here, we use JSON viewer to view the data composition of Weibo. The specific data are as follows:

Figure 7 Weibo JSON data

From the figure above, we know that Weibo is rich in data information, which is composed of some basic data types and complex data types user. Next, we will use the jQuery implementation to call Weibo API methods.

First, we define a global object that contains three properties: numWeibo, appendTo, and appKey, and three methods loadWeibo (), timeAgo (), and clean (), which are defined as follows:

The copy code is as follows:

JQWeibo = {

/ / The number of weibos display in the page.

/ / Sets the number of weibos, append class and app key.

NumWeibo: 15

AppendTo:'# jsWeibo'

/ / The appkey you apply from weibo.

AppKey: YourAppKey

/ / The function to get weibo data.

LoadWeibo: function () {

}

/ * *

* Convert the time to relative time.

* @ return {string} relative time like "8 minutes ago"

, /

TimeAgo: function (dateString) {

}

Ify: {

Clean: function (weibo) {

Return this.hash (this.at (this.list (this.link (weibo)

}

} / / ify

}

Above we define an object JQWeibo, where the loadWeibo () method uses the Ajax method of jQuery to send cross-source requests to Weibo API. Let's implement this method.

The copy code is as follows:

/ / The function to get weibo data.

LoadWeibo: function () {

$.ajax ({

/ / Weibo API.

Url: "http://api.t.sina.com.cn/statuses/public_timeline.json",

Type: "GET"

DataType: "jsonp"

Data: {

Source: JQWeibo.appKey

Count: JQWeibo.numWeibo

}

/ / When the requet completed, then invokes success function.

Success: function (data, textStatus, xhr) {

/ / Sets html structure.

Var html =

'' +

'USER' +

': WEIBO_TEXTAGO'

/ / Appends weibos into html page.

For (var I = 0; I < data.length; iTunes +) {

$(JQWeibo.appendTo) .append

Html.replace ('WEIBO_TEXT', JQWeibo.ify.clean (data [I] .text))

/ / Uses regex and declare DOMAIN as global, if found replace all.

.replace (/ DOMAIN/g, data [I] .user.domain)

.replace (/ USER/g, data [I] .user.screen _ name)

.replace ('AGO', JQWeibo.timeAgo (data [I] .replace _ at))

);

}

}

})

}

Now we use the $.ajax () method to send a cross-source request to the Weibo API, and we pass the JQWeibo.appKey and JQWeibo.numWeibo to the API, and when the request is complete, call the Success () method to insert the JSON data into the page.

The HTML code for the page is as follows:

The copy code is as follows:

Weibo Feed

Figure 8 Cross-source data

As shown in the figure above, we use the $.ajax () method to call the public Weibo interface, and when we successfully get the server callback data, insert it into our page.

1.1.3 Summary

This paper mainly introduces the applicability of Ajax in homologous requests, but its limitations in cross-source requests, and then introduces the solutions of Ajax and JSONP in cross-source requests.

Answer several questions from qianlifeng about cross-source requests:

1. Why does a cross-source request without jsonp report an error? Isn't it the same request as those of the same origin? (may not know much about ajax)

A: first of all, there are not only JSON solutions for cross-source requests, but other methods mentioned in this article, such as form POST, server proxy, Html5 XDomainRequest and Flash request, etc. When you mention error reporting, I think you should first confirm whether the data format is correct. Cross-origin requests and cognate requests have been introduced in this article.

two。 I don't understand the part about "defining callback functions with Javascript". Why can cross-source requests be made by passing a js method of the current page to a cross-source server? (JSONP? What does the server do according to this js method?

A: first of all, we understand that JSON is a data format, and JSONP seems to encapsulate the JSON format through a method name. Cross-source requests are not achieved by specifying a callback function, but by using the browser to allow cross-source requests for resources. You can also use the jQuery library provided by Google in my HTML code, which also shows that resources can be requested across sources. When we send a cross-source request, the server returns JSONP, but the server cannot predict the name of the method to accept the JSON data, so we have to tell (pass) the function name to the server.

The copy code is as follows:

/ / JSON

{"name": "JK_Rush", "id": 23}

/ / JSONP

Func ({"name": "JK_Rush", "id": 23})

3. Look at your example on Sina Weibo. Is the ajax of jquery dealing with cross-source? Can you tell me the difference between the two cross-source approaches or different application scenarios, or are they all the same?

A: it is implemented through the $.ajax () method, or if you want to use a dynamic Javascript implementation; the difference between the two cross-sources has been pointed out in the blog post.

Answer @ On the road.... About the implementation of deserialization of JSON into objects:

A: generally, we can deserialize JSON data into objects in three ways: DataContractJsonSerializer introduced in JavaScriptSerializer,WCF introduced in ASP.NET AJAX, and Json.NET.

Suppose we get the JSON data for employee information (employee), which contains two attributes, id and complex attribute name, as follows:

The copy code is as follows:

[

{

"id": "82105"

"name": {

"lastName": "Huang"

"firstName": "JK"

}

}

{

"id": "82106"

"name": {

"lastName": "Leung"

"firstName": "Cindy"

}

}

]

String data = "[{\" id\ ":\" 82105\ ",\" fullname\ ": {\" lastName\ ":\" Huang\ ",\" firstName\ ":\" JK\ "}," +

"{\" id\ ":\" 82106\ ",\" fullname\ ": {\" lastName\ ":\" Leung\ ",\" firstName\ ":\" Cindy\ "}]"

According to the composition of the above JSON data, we define the corresponding object model, which is defined as follows:

The copy code is as follows:

/ / The Employee model.

Public class Employee

{

Public int Id {get; set;}

Public Name FullName {get; set;}

}

/ / The Name model.

Public class Name

{

Public string FirstName {get; set;}

Public string LastName {get; set;}

}

Next, we will introduce the use of JavaScriptSerializer,Json.NET and DataContractJsonSerializer to deserialize JSON data into objects.

JavaScriptSerializer

The copy code is as follows:

Var serializer = new JavaScriptSerializer ()

Var employees= serializer.Deserialize (data); Json.NET

Using (var stringReader = new StringReader (data))

Using (var jsonTextReader = new JsonTextReader (stringReader))

{

Var serializer = new JsonSerializer ()

Var employees = serializer.Deserialize (jsonTextReader)

}

DataContractJsonSerializer

For the DataContractJsonSerializer method that uses WCF, we need to add DataContract and DataMember attributes to the object model, as defined as follows:

The copy code is as follows:

[DataContract]

Public class Employee

{

[DataMember (Name = "id")]

Public int Id {get; set;}

[DataMember (Name = "fullname")]

Public Name FullName {get; set;}

}

[DataContract]

Public class Name

{

[DataMember (Name = "firstName")]

Public string FirstName {get; set;}

[DataMember (Name = "lastName")]

Public string LastName {get; set;}

}

Then we use the ReadObjects () method to convert the JSON data into an object.

The copy code is as follows:

Using (MemoryStream ms = new MemoryStream (Encoding.UTF8.GetBytes (data)

{

DataContractJsonSerializer serializer = new DataContractJsonSerializer (typeof (List))

Var employee = (List) serializer.ReadObject (ms)

}

Thank you for reading this article carefully. I hope the article "sample Analysis of Ajax and JSON" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.