The second day of dojo learning ajax asynchronous request binding list_dojo

Users don’t like scroll bars, so we made tab switching. Users don’t like refreshing the page, so we have to use ajax. In the past few years, almost every web developer was proud to know a little bit of ajax. But knowing that using ajax is not enough, because technology serves people and cannot be abused. You can never make an asynchronous request just to verify a textbox. I also encountered someone who used ajax to update user information. The pictures in the user information were updated using postback. During an update, ajax was stuck there first, and then posted back. How do you think this is? 2 behavior? There are quite a few people like this. I have also encountered someone who uses ajax to update and then locate the location. I don't understand. What's the point of his ajax? It was purely to show that he knew there was such a thing.

Speaking of ajax, I have to talk about the cross-domain problem. When you asynchronously request files under other domain names, access security problems arise. There are many solutions on the Internet, most of which are deceptive. However, there are still two absolutely feasible ways. For example, if you want to asynchronously access cc.ashx under bb.com under aa.com:

1. We can create the dd.ashx file under aa.com, and then use ajax to access the dd.ashx file. At this time, dd.ashx will access cc.ashx under bb.com, because there is no cross-domain problem with background access. , so there is no cross-domain at this time, because what you asynchronously access is still the file dd.ashx in the same domain as aa.com. As for how dd.ashx accesses bb.com, I won’t go into details. You can search for the thief program. The principle is similar.
2. jsonp returns, this method is more popular now, because the first method requires one more request, which will inevitably affect the speed. I don't think the name jsonp is good at all. I prefer to call it "json callback". Its principle is , have you noticed that there is no cross-domain reference to external JS files in this way? What does it have to do with json? jsonp returns a json object on the server side, and performs callbacks on the client to perform related operations on this object. Are you getting less clear the more you listen? I won’t mislead you anymore, just search it yourself.

So, json is very important in the entire js learning (this topic is a bit tough). Generally, ajax returns json, so in dojo, there is another need for json. For some new processing, let’s look at the following code:

Copy the code The code is as follows:

var jsons=[{},{}];
jsons[0].url="http://www.jb51.net";
jsons[0].text="Script Home";
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("${text}",onejson});,);
list.appendChild(li);

Let’s explain it sentence by sentence, Don't ignore it because it is small. First, I declared an array object jsons, which contains two json objects, and assigned values ​​​​to their url and text respectively. Why did I write it in so many separate lines? It is mainly for easy understanding. You also It can be written as the following line:

var jsons=[{url:"http://www.jb51.net",text:"Script Home"},{url:"http://www.lovewebgames .com/",text:"My website"}];
Then we traverse this array. Here I use dojo's forEach method, which has two parameters, one is the object to be traversed, and the second The first is a function handle (you can call it a handle or a delegate), which has a parameter, which is each item traversed. Finally, I also used a string template to get the attribute value in json. ${url} is equivalent to taking the value of onjson.url, ${text}=onejson.text. For an example, please click here

Now we are going to make a commonly used list binding. It has some common functions, such as alternating row styles, draggable column widths, and optional sorting. It can be regarded as a standard basic table. As shown below:

To do this, we need to reference new components. There are also new table theme styles, MF. Just finish the code and explain:

Copy code The code is as follows:

<script> <BR>dojo.require("dojo.parser"); <BR>dojo.require("dojo.data.ItemFileReadStore"); <BR>dojo.require("dojox.grid.DataGrid" ); <BR></script>

The tundraGrid.css style is newly added here to control the appearance of the table. The file ItemFileReadStore is used to store the data source. dataGrid is the table declaration file. The call is as follows:

Copy code The code is as follows:

jsId="wishStore" url= "services/cigar_wish_list.json">

Cigar th>	Length/Ring	Origin	Wrapper	Shape

In the first line, we store the data source on a div with the extended attribute jsId="wishStore", then associate the store on the table to the above data source, and finally on each column Use the extended attribute field to bind the fields to be displayed. Even if the binding is successful, there are some other attributes in the DataGrid, including clientSort (sort), autoHeight (automatic width), etc. For details, please see the official website. Introduction
http://dojotoolkit.org/reference-guide/dojox/grid/DataGrid.html
There is so much content today, it may be a bit superficial, but if you are just getting started, it is still Better to take your time. For specific examples, please click here to view .