The binding list of ajax asynchronous requests learned by dojo the next day

Source: Internet
Author: User

Users do not like the scroll bar, so we made a tab switch, users do not like to refresh the page, so we have to use ajax. In the past few years, almost every web-side developer, i'm proud to know a little about ajax, but I know that ajax is far from enough, because it is a service for people and cannot be abused, you cannot perform an asynchronous request to verify a textbox. I also met someone who used ajax to update user information, used images in user information, and sent back for updates. In an update, ajax was first stuck there, and then send it back. What kind of behavior do you say this is? There are still a lot of such people. I have also met someone who uses ajax to update and locate the location. I don't understand. What does his ajax mean? This is just to show that he knows that there is such a thing.

Speaking of ajax, I have to talk about the cross-origin issue. When you asynchronously request files under other domain names, there is a access security issue. There are a lot of solutions on the internet, mostly for Dummies, however, there are two absolutely feasible scenarios, for example, to asynchronously access the cc under bb.com under aa.com. ashx:

1. We can create dd under aa.com. and then use ajax to access the dd. the ashx file. At this time, dd. ashx then visits the cc under bb.com. ashx, because there is no cross-origin issue in the background access, there is no cross-origin in this case, because you access the file dd in the same domain of aa.com asynchronously. ashx. As for how dd. ashx can access bb.com, I will not say much about it. You can search for the thief program. The principle is similar.
2. Jsonp return. This method is popular now, because the first one is more than one request, and the speed will inevitably be affected. Jsonp name, I think it is not good at all, I prefer to call it "json callback", its principle is <script src = "http://bb.com/cc.ashx"> </script>, as you can see, there is no cross-domain reference to the external JS file. What is the relationship between json and json? Jsonp is to return a json object on the server. It performs the related operations on the object through callback on the client. Are you more and more confused? I will not mislead you either. Please search for it yourself.

Therefore, json is crucial in the entire js learning process (this topic turns a bit hard). Generally, ajax returns json, so in dojo, there are some new processing operations for json. Let's look at the following code:Copy codeThe Code is as follows: var jsons = [{},{}];
Jsons [0]. url = "http://www.jb51.net ";
Jsons [0]. text = "";
Jsons [1]. url = "http://www.lovewebgames.com ";
Jsons [1]. text = "my website ";
Var list = document. getElementById ("list ");
Dojo. forEach (jsons, function (onejson ){
Var li = document. createElement ("li ");
Li. innerHTML = dojo. string. substitute ("<a href = '$ {url}' >$ {text} </a>", onejson });,);
List. appendChild (li );

I still want to explain it in a sentence. I will not ignore it because of small issues. First, I declare an array object jsons, which contains two json objects and assign values to their url and text respectively, why do I need to separate these lines for better understanding? You can also write the following lines:

Var jsons = [{url: "http://www.jb51.net", text: "" },{ url: "http://www.lovewebgames.com/", text: "My website"}];
Then we traverse this array. Here I am using the dojo forEach method. It has two parameters, one being the object to be traversed, the second is a function handle (you call it a handle or a delegate). It has a parameter, that is, every item of traversal. Finally, I used a string template to get the attribute value in json. $ {url} is equivalent to taking the value of onjson. url, $ {text} = onejson. text. Click here for an example

Now we need to bind a list frequently used. It has some common functions, such as line style alternation, column width can be dragged, and sorting can be selected. This is a standard basic table, as shown in:

We need to reference new components again when doing this. There is also a new style for the table topic, MF, which can be explained after the code is completed:Copy codeThe Code is as follows: <style>
@ Import url (../dijit/themes/tundra/tundra.css );
@ Import url (../dojo/resources/dojo.css );
@ Import url (../dojox/grid/resources/tundrd.d.css );
</Style>
<Script>
Dojo. require ("dojo. parser ");
Dojo. require ("dojo. data. ItemFileReadStore ");
Dojo. require ("dojox. grid. DataGrid ");
</Script>

The tundragrid.css style is used to control the appearance of a table. The ItemFileReadStore file stores the data source, and the dataGrid is a table declaration file. The call is as follows:Copy codeThe Code is as follows: <div dojoType = "dojo. data. ItemFileReadStore"
JsId = "wishStore" url = "services/cigar_wish_list.json">
</Div>
<Table id = "grid" dojoType = "dojox. grid. dataGrid "width = '000000' store =" wishStore "clientSort =" true "autoHeight =" true "autoWidth =" true ">
<Thead>
<Tr>
<Th field = "description" width = "15em"> Cigar </th>
<Th field = "size"> Length/Ring </th>
<Th field = "origin"> Origin </th>
<Th field = "wrapper"> Wrapper </th>
<Th field = "shape"> Shape </th>
</Tr>
</Thead>
</Table>

In the first line, we store the data source on a div with the extended property jsId = "wishStore", and then associate the table with the store to the above data source, finally, use the extended attribute field in each column to bind the field to be displayed. In this way, even if the binding is successful, there are some other attributes in the DataGrid. Here there is clientSort (sorting) autoHeight (automatic width), etc. For more information, see the official website.
Http://dojotoolkit.org/reference-guide/dojox/grid/DataGrid.html
Today's content is so much, it may be a little simple, but it's better to get started. For specific examples, click here.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.