It also sends multiple AJAX requests asynchronously, and how to fetch the return data of an AJAX request.

One: Demand

To implement the following input box to support fuzzy query, query string: "Nick."

Second: The principle of realization

The input box is bound to the KeyUp event, and then the AJAX request, with input parameters, goes back to the background database to fetch the data and return to the page.

Three: Analysis

1), the AJAX request is set to synchronous.

Performance will not be good, because it is synchronous, so when you enter "N" will be issued an AJAX request, and this time the input box can no longer input characters, must wait until the first request to continue to enter the "I". Of course, the data returned at this time must be correct.

1), the AJAX request is set to asynchronous. You do not have to worry about entering only one character at a time, you can lose it at once. This time also made four AJAX requests. "N", "Ni", "Nic", "Nick" each made an AJAX request. Now the question is: If the code is the following, there will be a problem.

$ ("[name= ' Searchkey ']"). KeyUp (function () {
			var inputname = this.value;
			var existselectuser = "false";
			if ($ ("#selectSCNames"). Find ("option"). length>0) {
				Existselectuser = "true";
			}
			$.ajax ({
				URL: "<%=home%>/userdailyactionreportaction.do?operation=getmatchuser",
				data:{
					" InputName ": InputName,
					" Existselectuser ": Existselectuser
				},
				async:true,
				dataType:" JSON ",
				type: "POST",
				success:function (Result) {
					$ ("#showDiv"). HTML (result.matchedusers);
				}
			});
		});

An incorrect result was found after typing "Nick".

What is the reason: look at the picture below,

In fact, it can be seen from the code, actually take is the last request of the return data. But because the time of four requests is different, although "n" and "ni" are triggered first, but they use more time than "Nic" and "Nick", so the last data is the most requested time of the AJAX request returned data, that is, "NI" the request data. And the string we entered was "Nick." So there is a problem with data mismatch.

How to fix it.

Use the following code to work properly.

var datas = new Array ();
var i = 0;
$ ("[name= ' Searchkey ']"). KeyUp (function () {
			i++;
			var inputname = this.value;
			var existselectuser = "false";
			if ($ ("#selectSCNames"). Find ("option"). length>0) {
				Existselectuser = "true";
			}
			$.ajax ({
				URL: "<%=home%>/userdailyactionreportaction.do?operation=getmatchuser",
				data:{
					" InputName ": InputName,
					" Existselectuser ": Existselectuser,
					" index ": I
				},
				async:true,
				DataType: "JSON",
				Type: "POST",
				success:function (result) {
					var index = result.index;
					var ind = index-1;
					Datas[ind] = result.matchedusers;
					$ ("#showDiv"). html (datas[i-1]);});}
		);

Analysis:

1: An array and an index are created here.

2: Keyup,index plus 1 per trigger.

3: Each request, with index, as a parameter.

4,: Returns the index passed in.

5, the returned data is plugged into the index position of the array.

6, take the data at the last position of the array.

Why is the data taken to be correct?

Because although "Nick" is the fourth time to trigger KeyUp, so "I" is 4, so he asked simultaneous to enter the index is 4, the return index is also 4. Although it is the shortest request time, the data he returns will be placed in the fourth position of the array. In fact, no matter "Nick" request time is the number of rows, because he is the fourth time to trigger the KeyUp event, so he asked simultaneous to enter the index is 4, so his request to return the data will be stuffed into the fourth position of the array. So there is no question of the incorrect data being queried.