ajax study notes 4_jquery in jquery-JS Tutorial-php.cn

ajax study notes 4_jquery in jquery

WBOY

Release： 2016-05-16 18:00:48

Original

893 people have browsed it

Cache problem:
What is a cache problem? That is, when the input content of the browser is the same, that is, the requested URL is the same, the browser will read the cache. If the content is the same twice, it will not interact with the server.
Solution: Add a timestamp to the requested URL.
Through my test, IE and 360 will not interact with the server when the user name is entered twice. Firefox will still interact with the server even if the user name is entered the same twice.
That is: the temp value returned by the server in Firefox will increase by 1 each time, but IE and 360 will not change. Therefore, adding a timestamp will no longer cause caching problems in these three browsers.
Modified code:
AJAXServer.java
Caching problem

Copy code The code is as follows:

 
//The input content of the test code added to the caching problem remains unchanged in IE and the number of 360 times does not increase, but firefox will increase 
Integer inte= (Integer) request.getSession().getAttribute("total"); 
int temp=0; 
if(inte==null){ 
temp=1; 
}else{ 
temp=inte.intValue() 1; 
} 
request.getSession().setAttribute("total",temp); 

Add the above code to AJAXServer.java, and add the temp variable during out.println and return it to the client.
In this way, if the client's temp value is added, it means that the client and server interact, otherwise there is no interaction.
verify.js

Copy code The code is as follows:

 
 
//Add timestamp to url address, fool the browser and not read cache
function convertURL(url){ 
//Get timestamp
var timestamp=(new Date().valueOf()); 
//Splice the timestamp information into the url
//url="AJAXServer" 
if(url.indexOf("? ")>=0){ 
url=url "&t=" timestamp; 
}else{ 
url=url "?t=" timestamp; 
} 
return url; 
} 
function verifyCache(){ 
var url="AJAXServer?name=" $("#username").val(); 
url=convertURL(url); //Cache
$.get(url,null,function(data){ 
$("#result").html(data); 
}); 
} 

Due to I just asked about verification and caching issues. In order to facilitate the explanation of the problem, the verification method used is jquery encapsulated ajax to receive server-side text data.
》》》Similarly, don’t forget to modify the method called in ajax.html and change the name to verifyCache() in the above script
Chinese problem:
There are two solutions:
First Type: Use encodeURI once on the page side, and use String name=new String(old.getBytes("iso8859-1"),"UTF-8") on the server side;
Chinese 1

Copy code The code is as follows:

 
function verifychinese1{ 
var url="AJAXServer?name=" encodeURI($("#username ").val()); 
url=convertURL(url); //Cache
$.get(url,null,function(data){ 
$("#result").html( data); 
}); 
》》》Add the above method to verify.js, and also add 
String name=new String(old.getBytes("iso8859-1"),"UTF-8 "); 

is added to the appropriate location in the AJAXServer.java class. For example, just put it after the PrintWriter code.
Similarly, when using the first method, don’t forget to modify the method called in ajax.html, and change the name to verifychinese1() in the above script.
Second method: Use encodeURI twice on the page side and on the server side. Use String name= URLDecoder.decode(old,"UTF-8");
Chinese 2

Copy code The code is as follows :

 
function verifychinese2(){ 
var url="AJAXServer?name=" encodeURI(encodeURI($("#username").val())); 
url= convertURL(url); //Cache
$.get(url,null,function(data){ 
$("#result").html(data); 
}); 
} 
》》》Add the above method to verify.js, and add 
String name= URLDecoder.decode(old, "UTF-8"); 

to AJAXServer.java the appropriate location in the class. For example, just put it after the PrintWriter code.
Similarly, when using the second method, don’t forget to modify the method called in ajax.html, and change the name to verifychinese2() in the above script.
If you need the source code, you can leave a message.
After a few days of study, I have a basic understanding of the dynamic verification of ajax. I will add corresponding content according to the situation in the future.