Simple Ajax for Web Development

The following is a summary of my other blog qingteng house. As the blog garden is busy, I am going to share some of my favorite blogs. You can always visit these two blogs :)

I. Introduction

I have been thinking over the past two days. Although I was just new to my career, I have been tossing a lot of ASP. NET problems in my school lab.
Web project, I think I am familiar with web development, but suddenly looking back, I found that the knowledge is very messy. I thought I knew it very well. I tried to tell my students about ASP. NET.
During web development, every time I talk about it, I don't understand it, but because of the lack of summarization, many basic things are east and west, it will naturally be messy.
So I decided to gradually summarize the basic things from now on, just as the teacher told us before the College Entrance Examination that we should learn to sort out the basic knowledge, so I will summarize and sort it here, make preparations for timely sharing with you.

Next, I am going to summarize and present some basic information about my development of the ASP. NET web project as a special topic. Because ASP. NET
The scope of web development is really large, including front-end, back-end, server, architecture, etc. So I have to sum up the aspects within my capabilities, and hope I can summarize some ASP. NET
This helps beginners in Web development.

PS: Since I am working now and have limited time, I can only summarize it once a week. If you are interested in listening to me, you can follow my blog. I will try my best!

2. Singing Ajax-opening nagging

Ajax is one of the focuses of almost every web developer, beginner or veteran. However, many of my friends, especially beginners, are simply using it frantically.
Ajax, as for the principles of Ajax and when Ajax is suitable for use, many may not have much attention. However, these are basic things and cannot be understood, you will be like me
As soon as the lecture was over, it was just a joke. Well, today I will try to summarize the basic Ajax knowledge. This article will be discussed from multiple perspectives and interested parties.
You can also add a comment, text message or email to contact me, and I will add it as appropriate. We would like to thank our friends in advance and those who have supported the recommendation :)

3. Sing Ajax-Unveil the secret

What Is Ajax? Well, you may be in Google or Baidu at this time. Soon you found the answer: Ajax
That is, "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML) is a javascript
XMLHttpRequest objects are used to directly synchronize or asynchronously communicate with the server. It is a combination of XHTML, CSS, JavaScript, and other technologies and can be greatly improved.
High user experience. I will not repeat it here. To help you understand the principles of Ajax, let me give you an analogy to uncover its mysterious veil: Suppose you are a big star (you need
Server Communication browser), there is a pretty elegant but very powerful wife, in addition you are very romantic, outside raised 10 small three (10 server requests ). One day you want to make an appointment with John
Yes (you need to communicate with the server), but your mobile phone or other communication tools are monitored by your powerful wife. The direct contact will surely be discovered by the wife, and then it will be miserable, what should I do? I really want to miss the three.
Ah, huh, send a code to your broker (XMLHTTPRequest object can also be regarded as an agent). Let the broker help you send the appointment information, and you can continue to be lingering with your wife.
(This is the benefit of Asynchronization.) instead of making phone calls one by one, you and your wife will be done after the agent has sent the appointment information, neither delay nor delay
Thanks to your wife, you can go out and have a date with John. Haha!

In fact, the most important thing in Ajax is the XMLHTTPRequest object, which acts as a proxy for direct interaction with the server. The browser can hand over some long-waiting transactions
XMLHTTPRequest object, let him do it, and he can continue to do other things, such as lingering with his wife. When the XMLHTTPRequest object communicates with the server, it will send
Events are sent to the browser so that the browser can process the completed results (update Dom with JavaScript ). How is it? is the basic principle of Ajax quite simple.

Several attributes of the XMLHTTPRequest object are attached here:

Onreadystatechange // event handler of the event triggered by each state change.
Responsetext // string format of the data returned by the slave server process.
Responsexml // dom-compatible document data objects returned by the slave server process.
Status // The number code returned from the server, such as common 404 (not found) and 200 (ready)
Status text // string information of the accompanied status code
Readystate // object status value
0 // (not initialized) the object has been created, but has not been initialized (the open method has not been called)
1 // (initialization) the object has been created and the send method has not been called
2 // (send data) The send method has been called, but the current status and HTTP header are unknown
3 // (in data transmission) Some data has been received. Because the response and HTTP headers are incomplete, an error occurs when retrieving part of data through responsebody and responsetext,
4 // (complete) After receiving the data, you can use responsexml and responsetext to obtain the complete response data.

Iv. Singing Ajax-Basic use

Here I will talk about how to use native js to implement Ajax and jquery to implement Ajax in combination with ASP. NET.

1. Use native JS:

VaR request = false;
// Create an XMLHTTPRequest object based on different browsers
Try {
Request = new XMLHttpRequest ();
} Catch (trymicrosoft ){
Try {
Request = new activexobject ("msxml2.xmlhttp ");
} Catch (othermicrosoft ){
Try {
Request = new activexobject ("Microsoft. XMLHTTP ");
} Catch (failed ){
Request = false;
}
}
}
If (! Request)
Alert ("error initializing XMLHttpRequest! ");
Function ajaxtest (){
VaR url = "test. aspx"; // specify the URL
Request. Open ("get", URL, true); // open Ajax and specify it as an asynchronous request
Request. onreadystatechange = updatepage; // specify the callback function.
Request. Send (null); // send an Ajax request
}
Function updatepage (){
Alert (request. responsetext );
}

Ajaxtest ();

2. Use jquery:

Jquery is much simpler. Here we use jquery to implement Ajax in four ways. get, $. post, $. getjson and $. ajax usage.

5. Singing Ajax-recommending several excellent Ajax frameworks

In this age, General programs should learn to use the framework, and powerful programmers should be able to write the framework. Well, I am a general programmer, so I should learn how to use the framework.

Currently, there are many popular Ajax frameworks on the market. Here I recommend that Beginners use the following frameworks (of course, the best learning for beginners is to use native JS)

1. jquery (strongly recommended)

The biggest feature of jquery is its simplicity, flexibility, and small code. It focuses on Dom selectors, so don't underestimate it. Currently, jquery-based Open-Source plug-ins are the most popular among others on the Internet, most of them are compatible with mainstream browsers, and many ready-made Plug-ins have been used for lazy people like me. We recommend several jquery learning websites:

Jquery Official Website: http://jquery.com/

Jquery UI Official Website: http://jqueryui.com/

Jquery plug-in Daquan: http://www.cnblogs.com/terrylee/archive/2007/12/09/the-ultimate-jquery-plugin-list.html

There are also some jquery blogs and Chinese jquery forums

Beginners can go to the box frequently in the above section for help :)

2. Prototype

A very elegant JS library that defines JS object-oriented extensions, Dom operation APIs, events, and so on.
Rico/script. aculo. Us implements functions and effects of some JS components. With prototype as the core, it forms a variety of peripheral JS extensions.
Library is a promising underlying JS framework. Its outstanding feature is that it is easy to learn and easy to use, and the threshold is very low. It is often a line or two of js code that can handle a related function. It is also the Ajax integrated by ror.
JS library.

Prototype Official Website: http://www.prototypejs.org/

3. extjs

It seems that this is not called extjs now, but I will call it like this. You can understand it. How can I use this framework? If a beginner can see its various interface components
I fell in love with him deeply, and I used to share the same experience. I spent a whole summer vacation for him. However, I do not recommend ext very much because its library is too large. The versions I used last compressed have
400 K +, and the performance in IE is generally or even relatively low, it is still difficult to learn. Of course, interested friends can also go to see, or worth a look, ext Official Website: http://www.sencha.com/

There are also many other frameworks, such as mootools, Yui, and dojo. I have never used them, and they may not be used frequently. If you are interested, I will not introduce them.

6. Sing Ajax-advantages and disadvantages

Advantages:

1. You can communicate with the server without refreshing a new page. This solves the white screen wait defect of complex transactions and improves the user experience.

2. asynchronous operations allow the browser to continue other work without interrupting the Ajax request, so it has better response capability.

3. Because it is "On-Demand acquisition and partial update", redundant data is reduced and server bandwidth is reduced.

Ajax is not omnipotent either. The following describes the disadvantages:

1. Too many Ajax websites are not very friendly to Seo, because search engines cannot search DOM data generated by Js.

2. For security issues, Ajax technology is like establishing a direct channel for enterprise data. This allows developers to inadvertently expose more data and server logic than before. Ajax
The security scanning technology of the client can be hidden to allow hackers to create new attacks from the remote server. In addition, Ajax is also difficult to avoid some known security vulnerabilities, such as cross-site scripting attacks,
SQL injection attacks and credentials-based security vulnerabilities.

3. The complicated Ajax framework is very troublesome for program debugging. Therefore, the design cost is relatively high and the controllable cost is higher.

4. Improper use will not only reduce bandwidth, but also increase HTTP connections to the server (originally an HTTP connection can be completed with N Ajax requests ), A connection is established at one send, and the server's ability to process both HTTP connections is limited.

Therefore, it is not reasonable to use Ajax at any time. Before using Ajax, evaluate the project and make relevant designs, rather than Ajax for Ajax.

7. Singing Ajax-Summary

In conclusion, Ajax is widely used in our projects, but we need to understand it first so that we can better grasp it, so that we can correctly determine whether Ajax should be used and what Ajax framework should be used. The above is my personal summary of Ajax, hoping to help beginners.