Ajax (Asynchronous JavaScript And XML)

Source: Internet
Author: User

Let's take a look at the domestic And foreign interpretations of ajax: Baidu Encyclopedia: AJAX refers to Asynchronous JavaScript And XML (Asynchronous JavaScript And XML ).
Chinese translators often say "ajax" is the same as the Ajax football team. Web application interaction, such as Flickr, Backpack, and Google, has made a qualitative leap in this regard. This term is derived from the conversion from a Web-based application to a data-based application. In data-based applications, user-required data, such as the contact list, can be obtained from a server independent of the actual web page and can be dynamically written into the web page, color the slow Web application experience to make it look like a desktop application.
The core of Ajax is the JavaScript Object XmlHttpRequest. This object was first introduced in Internet Explorer 5. It is a technology that supports asynchronous requests. In short, XmlHttpRequest allows you to use JavaScript to request and process responses to the server without blocking users.
Wikipedia: AJAX is "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML technology). It refers to a set of browser-side web page development technologies that integrate multiple technologies. The Ajax concept was proposed by Jesse James Garnett [1].
Traditional Web applications allow users to enter forms. When submitting forms, they send a request to the Web server. The server receives and processes the form and sends it back to a new web page. However, this process wastes a lot of bandwidth because most of the HTML code on the first and second pages is usually the same. Because each application communication request needs to be sent to the server, the response time of the application depends on the response time of the server. This causes the user interface to respond much slower than the local application.
In contrast, an AJAX application can only send and retrieve required data to the server. It uses SOAP or some other XML-based page service interfaces (interfaces ), the client uses JavaScript to process responses from the server. Because a large amount of data is exchanged between the server and the browser (about 5% of the original data ). As a result, we feel that the server response is faster. At the same time, a lot of processing work can be done on the client machine that sends the request, so the load on the Web server is also reduced.
Ajax technology, in my own words, is the integration of several technologies, and finally realizes asynchronous webpage interaction! This is a qualitative leap. When the amount reaches a certain level, a simple combination of results will be totally different. Now let's take a look at the actual ajax tutorial in the project: implementation effect: implementation Technology for asynchronous Writing of answer records during answers: ajax technical prerequisites: ajax, jquery ,. net, SQL difficulties: Dynamic controls, control combinations, ajax interaction implementation concept diagram:
Code implementation: key code of the dynamic control:

 radioButton.Attributes.Add("onclick", "javascript:AnswerSingleSelectQuestion('" + strSingleSelectionRecordTableName + "','" + StudentId + "','" + ExamId + "','" + Convert.ToInt32(dr["questionId"]) + "','" + dr["correctAnswer"].ToString() + "','" + option + "','" + Convert.ToDouble(dr["fraction"].ToString()) + "')");

Key js Code:
// Update the answer record function AnswerSingleSelectQuestion (tableName, studentId, examId, questionId, ReferAnswer, examAnswer, fraction) {// convert the reference answer and answer to ReferAnswer = decodeURIComponent (ReferAnswer); examAnswer = decodeURIComponent (examAnswer ); // obtain the timestamp var timestamp = (new Date ()). valueOf (); $. ajax ({url: "ExamAnswerDeal. ashx ", data: {" tableName ": tableName," studentId ": studentId," examId ": examId ," QuestionId ": questionId," ReferAnswer ": ReferAnswer," examAnswer ": examAnswer," fraction ": fraction," Event ":" Update "," timestamp ": timestamp}, dataType: "text", type: "POST", success: function (data, textStatus) {}, error: function (XMLHttpRequest, textStatus, errorThrown) {// alert ("Answer failed, contact the administrator! "); // Save cookie SaveAnswerToCookie (studentId, examId, tableName, questionId, examAnswer," Update ", fraction, ReferAnswer ,"","");}});}

Key code of the general handler:
Public void ProcessRequest (HttpContext context) {context. response. contentType = "text/plain"; // obtain the event flag string strEvent = context. request. form ["Event"]. toString (); // The answer record entity QuestionsRecordsEntity EntityQuestionRecords = new QuestionsRecordsEntity (); EntityQuestionRecords. tableName = context. request. form ["tableName"]. toString (); // The table name EntityQuestionRecords. studentId = context. request. form ["studentId"]. toString (); // student ID EntityQuestionRecords. examId = Convert. toInt64 (context. request. form ["examId"]. toString (); // Test Id EntityQuestionRecords. questionId = Convert. toInt32 (context. request. form ["questionId"]. toString (); // The question ID EntityQuestionRecords. referAnswer = context. request. form ["referAnswer"]. toString (); // The correct answer string strExamAnswer = context. request. form ["examAnswer"]. toString (); // examinee's answer double dblFraction = Convert. toDouble (context. request. form ["fraction"]); // select the question if (strEvent = "Update") {// The answer record object Value assignment EntityQuestionRecords. EXAMANSWER = strExamAnswer; // if the examinee answers the correct question, the full score is obtained; otherwise, the score is zero if (EntityQuestionRecords. referAnswer = strExamAnswer) {EntityQuestionRecords. fraction = dblFraction;} else {EntityQuestionRecords. fraction = 0;} // EntityQuestionRecords. isCheck = "yes"; // update the answer record BllExamManage. modifyOneQuestionRecord (EntityQuestionRecords); context. response. write ("true ");}}

$. Ajax () is the encapsulated ajax code in jquery. He uses a certain format to constrain the use of ajax, and greatly facilitates the user's code writing! I have to say that the object-oriented design concept is now in every corner of development! Conclusion: we can see that a good idea will find an appropriate implementation in the world of code, which can only be unexpected and cannot be achieved. Today, the Internet era has been realized, what is important in project creation is not to care about the technical links, but the relationships behind these layers of relationships!

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.