Shulou(Shulou.com)06/03 Report--

This article will explain in detail the example analysis about the principle of AJAX. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Go to the schematic first:

Background:

1. Traditional Web sites, submitting forms, need to reload the entire page.

two。 If the server fails to return Response for a long time, the client will be unresponsive and the user experience will be poor.

3. After the server returns Response, the browser needs to load the entire page, which is also a great burden on the browser.

4. After the browser submits the form, it sends a large amount of data, resulting in network performance problems.

Question:

1. How to improve it?

What is 2.AJAX?

3. What are the advantages?

4. What are the shortcomings?

What is AJAX

1. Why do you need AJAX

When you need to get data from the server and refresh the page, if you do not use AJAX, you need to submit the entire form. When the form is submitted, the request is sent to the server. The page needs to wait for the server to send response before the page can resume operation.

The concept of 2.AJAX:

1.AJAX = asynchronous JavaScript and XML.

2.AJAX is a technology for creating fast dynamic web pages.

3. By exchanging a small amount of data with the server in the background, the web page can be updated asynchronously.

4. You can update a part of a page without reloading the entire page.

3. What is async?

The current page sends a request to the server, and the current page does not need to wait for the server to respond before operating the page. After sending the request, the current page can continue to browse and operate.

4. What is local refresh?

We can implement a partial refresh in two ways.

1. How iframe pages are reloaded.

Although this approach achieves a partial refresh, it is a page overload, so it also brings performance problems.

Step1. Define an Iframe in the page

Step2. Set the src of Iframe

Var indexFrame = document.getElementById ("indexFrame"); indexFrame.src = "introduction.php"

Step3. Add a click event for button, and when you click on the button, reset the src of Iframe to refresh the page in iframe. The content outside the Iframe is not refreshed.

Click meeting function IndexClick (moduleKey) {var indexFrame = document.getElementById ("indexFrame"); if (indexFrame = = null) {indexFrame = parent.document.getElementById ("indexFrame");} var url = "introduction.php"; switch (moduleKey) {case "introduction": url = "introduction.php"; break; case "room": url = "room.php"; break; default: {}} indexFrame.src = url;}

In this way we can implement the function of a navigation bar:

2.AJAX mode

Step1.JavaScrpit sends asynchronous request

Step2. The server queries the database and returns data

Step3. The server returns Response

Step4. The client operates the DOM with JavaScript based on the returned Response.

Look at the following example:

When we switch the Item in DropDownList, the JavaScript sends an asynchronous request to the server, and the Server returns the data, and then JavaScript parses the data, splices a Table, and presents the Table on the page.

Second, the principle of submitting Form forms

1. Code

Client code:

Your name 1:

Server code:

Public void ProcessRequest (HttpContext context) {/ / Delay for (int I = 0; I

< 2; i++) { System.Threading.Thread.Sleep(1000); } //从Requset.Form中获取fname的值。使用Form获取请求的键值对的值的前提条件是HTTP request Content-Type 值必须是"application/x-www-form-urlencoded" 或 "multipart/form-data". string fname = context.Request["fname"]; context.Response.ContentType = "text/plain"; //将字符串写入 HTTP 响应输出流。 context.Response.Write("Hello World " + fname); } 2.将代码部署到IIS 3.打开站点： http://localhost:8003/Test.html 4.输入"Jackson0714"然后点击Sumbit按钮，页面会重新刷新，显示"Hello World Jackson0714" 5.提交Form表单后，页面发送请求和服务端返回响应的流程 6.通过抓包，我们可以得到HTTP Headers 浏览器发送HTTP给服务端，采取的协议是HTTP协议。 在传输过程中，我们可以看下HTTP Headers。 三、AJAX提交请求和服务响应的原理 1.代码 客户端HTML代码： 您的姓名2： Ajax Post请求 客户端JS代码: var xmlhttp = createRequest(); function testGet() { var fname = document.getElementById("testGetName").value; xmlhttp.open("GET", "Test.ashx?fname=" + fname + "&random=" + Math.random() , true); xmlhttp.onreadystatechange = callback; xmlhttp.send(null);} function testPost() { var fname = document.getElementById("testPostName").value; xmlhttp.open("POST", "Test.ashx?" + "&random=" + Math.random() , true); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8"); xmlhttp.onreadystatechange = callback; xmlhttp.send("fname="+fname); } function createRequest() { var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } return xmlhttp} function callback() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("myDiv")[xss_clean] = xmlhttp.responseText; }} 这里有一点需要注意 var xmlhttp = createRequest(); 。 1.让服务端能够操作这个变量，如果定义成局部变量，则服务端返回response时，不能对xmlhttp的属性赋值。回调函数要求request是全局的，才能访问这个变量和它的属性值。 2.定义成全局变量后，可能出现两个请求或多个请求共享同一个请求对象。而这个请求对象只能存放一个回调函数来处理服务器响应。当服务器返回两个请求的Response后，可能会调用后指定的回调函数。所以可能有两个完全不同的服务器响应由同一个回调函数处理，而这可能并不是正确的处理。解决办法是创建两个不同的请求对象。 服务端代码不变。 2.输入"Jackson0714"然后点击Sumbit按钮，页面不会刷新，在最下面显示"Hello World Jackson0714" 3.AJAX发送请求和服务端返回响应的流程 4.通过抓包，我们可以得到HTTP Headers 浏览器发送HTTP给服务端，采取的协议是HTTP协议。 在传输过程中，我们可以看下HTTP Headers： 5.AJAX GET和POST方式区别 AJAX发送请求和POST发送请求的代码如下： //GET方式function testGet() { var fname = document.getElementById("testGetName").value; xmlhttp.open("GET", "Test.ashx?fname=" + fname + "&random=" + Math.random() , true);xmlhttp.onreadystatechange = callback; xmlhttp.send(null);} //POST方式function testPost() { var fname = document.getElementById("testPostName").value; xmlhttp.open("POST", "Test.ashx?" + "&random=" + Math.random() , true); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8"); xmlhttp.onreadystatechange = callback; xmlhttp.send("fname="+fname); } 四、XMLHttpRequest 对象的知识 1.XMLHttpRequest 对象的方法 2.XMLHttpRequest 对象的属性

5. Implementing AJAX with JQuery

The following code implements that when the item of DropDownList is switched, the getWeeklyCalendar method is triggered and the AJAX request is sent using the class library method $.ajax of JQuery.

Client-side JQuery code

Function getWeeklyCalendar (name,currentDate,mode) {$.ajax ({type:'POST', url:'weekProcess.php',data:'func=getWeeklyCalender&name='+name+'¤tDate='+currentDate+'& mode='+mode, success:function (data) {paintWeeklyCandler (data);}});}

After the background returns Response successfully, execute the paintWeeklyCandler (data) method

Background PHP code

VI. Advantages

1. Communicate with the server asynchronously. The page does not need to be reloaded and the page does not refresh.

two。 Fetch data on demand to reduce the burden on the server

3. Makes Web applications more responsive to user interactions

Based on standardized and widely supported technology, 4.AJAX does not need to download browser plug-ins or Mini Program, but requires customers to allow JavaScript to execute on the browser

5. The content of the browser is separated from the server code. The content of the page is all controlled by JAVAScript, and the server is responsible for logical checksum to get data from the database.

VII. Shortcomings

1. Security issues: expose server-side methods that can be used by hackers to attack

two。 A lot of JS code, easy to make mistakes

No refresh overload of 3.Ajax, because the change of the page is not as obvious as refresh overload, it is easy to cause trouble to users-- users are not sure whether the current data is new or has been updated; the existing solutions are: prompts for relevant locations, obvious design of data update areas, prompts for users after data updates, etc.

4. May break the normal behavior of the browser back button

5. The browsers included in some handheld devices (such as mobile phones, PAD, etc.) do not support Ajax well at present.

8. Application scenarios

1. Scenarios where data is filtered and manipulated

two。 Add / remove tree nodes

3. Add / remove a row of records from the list

4. Toggle drop-down list item

5. Verification of duplicate names of registered users

IX. Not applicable to scenarios

1. Save the content of the whole page

two。 Navigation

This is the end of this article on "sample Analysis of AJAX principles". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.