Users don't like scroll bars, so we made a tab switch, users do not like to refresh the page, so we are going to use Ajax, in the last few years, almost every web developer, have a little bit of Ajax pride, but know that using Ajax is not enough, because the technology is for human and service, You can't misuse the technology, you can't just request it asynchronously in order to validate a text box textbox. I also met someone, update the user information, use AJAX Update, user information in the picture, and use the postback to update, an update, first AJAX card in there, and then back to hair, you say this is how 2 of the behavior? This is a lot of people, I also met someone with Ajax updates and then location positioning, I do not understand, he that Ajax what significance? Just to show off that he knew there was such a thing.
Speaking of Ajax, we have to say that the problem of Cross-domain, is your asynchronous request to other domain names under the file, there is access to security issues, the internet said a lot of solutions, mostly to the people, but there are two absolutely feasible, such as aa.com under the bb.com to visit the CC.ASHX:
1. We can build dd.ashx files in aa.com, and then use Ajax to access dd.ashx files, then dd.ashx to visit bb.com under, because the background of access is not cross-domain problem, so there is no cross-domain, because you are the asynchronous access or cc.ashx the same domain files Dd.ashx. As for Dd.ashx how to visit bb.com I don't say more, can search the thief procedure, the principle is similar.
2. Jsonp return, this method is now more popular, because the first one more request, speed will inevitably have an impact. Jsonp This name, I think it is not good, I prefer to call it "JSON callback", it is the principle of <script src= "Http://bb.com/cc.ashx" ></SCRIPT> This refers to the external JS file is not a cross-domain, what does this have to do with JSON? JSONP is to return a JSON object on the server side, do the callback at the client to perform the related operation of this object, whether more and more unclear? I will not mislead you, go and search yourself.
So, JSON is very important in the whole JS learning, (This topic turns a bit hard), the general Ajax return is also JSON, so in dojo, there are some new processing of JSON, we look at the following code:
Copy Code code as follows:
var jsons=[{},{}];
Jsons[0].url= "Http://www.jb51.net";
jsons[0].text= "cloud-dwelling community";
Jsons[1].url= "http://www.lovewebgames.com";
jsons[1].text= "My Site";
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);
Or a sentence to explain, not because things are small and ignored, first I declare an array object jsons, which contains two JSON objects, respectively to its URL and text assignment, why should I separate so several lines to write, mainly for good understanding, you can also write the following line:
var jsons=[{url: "Http://www.jb51.net", Text: "Cloud Habitat Community"},{url: "http://www.lovewebgames.com/", Text: "My website"};
And then we iterate through this array, here I'm using Dojo's Foreach method, which has two parameters, one is the object to traverse, the second is a function handle (you call it a handle, call it a delegate), it has a parameter, which is the traversal of each item. Finally I used a string template to get the attribute value in JSON, ${url} is equivalent to take the Onjson.url value, ${text}=onejson.text. Please click here for examples
Now we want to do a common list binding, he has some common features, row style alternating, column width can be dragged, optional sorting, is a standard base table, as shown in the following figure:
This will also refer to the new components, as well as new for the table theme style, MF, directly after the code to explain:
Copy Code code as follows:
<style>
@import URL (.. /DIJIT/THEMES/TUNDRA/TUNDRA.CSS);
@import URL (.. /DOJO/RESOURCES/DOJO.CSS);
@import URL (.. /DOJOX/GRID/RESOURCES/TUNDRAGRID.CSS);
</style>
<script>
Dojo.require ("Dojo.parser");
Dojo.require ("Dojo.data.ItemFileReadStore");
Dojo.require ("Dojox.grid.DataGrid");
</script>
Here's a new tundragrid.css style that controls the appearance of the table, itemfilereadstore the file is stored in a data source, and the DataGrid is a table declaration file. The call looks like this:
Copy Code code as follows:
<div dojotype= "Dojo.data.ItemFileReadStore"
Jsid= "Wishstore" url= "Services/cigar_wish_list.json" >
</div>
<table id= "Grid" dojotype= "Dojox.grid.DataGrid" width= "100% ' 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 an extended attribute jsid= "Wishstore", then link the store to the above data source on the table, and finally bind the field to display with the Extended property field on each column, so that if the binding succeeds, There are some other properties in the DataGrid, here are Clientsort (sorting), autoheight (automatic width), and so on, the specific other please reader on the web
Http://dojotoolkit.org/reference-guide/dojox/grid/DataGrid.html
Today's content is so much, may be a little shallow, but, just get started, or slowly come good. For specific examples, click here to view.
