Set the obtained TAG body, dynamic binding event, and Ajax

Preface

Let's talk about Ajax and jquery's support for Ajax.

Ajax (Asynchronous JavaScript and XML) implements partial HTML refresh asynchronously. Creating interactive web applications without sacrificing the compatibility of browsers.

Label Body obtained by body settings

 

Dynamic event binding method 1

 

Method 2

 

Example

 

Ajax

1. ajax is a programming model promoted by Google in 2005. It is a new method that uses existing standards to create better, faster, and more friendly web applications.

2. Ajax Based on JavaScript and HTTP requests

3 .. Through Ajax, your javascript can use the XMLHTTPRequest object of JavaScript to directly communicate with the server. With this object, your javascript can exchange data with the Web server without reloading the page.

4. Ajax uses asynchronous data transmission between the browser and the Web server, which allows the webpage to request a small amount of information from the server, rather than the whole page.

1. Ajax

Synchronous JavaScript and XML is a technology generated to address the "Submit-wait-submit" Mode in traditional web. In essence, it is to use JavaScript to obtain a special built-in object (XMLHttpRequest) in the browser, to the server
When an asynchronous request is sent, the server returns XML and text data to XMLHttpRequest. Then, the server calls the Data Update page in the XMLHTTPRequest object through javascript. The page is refreshed throughout the process.

2. Ajax Programming

Step 1 get the XMLHTTPRequest object
Obtaining in IE is different from obtaining in other browsers. other browsers use new XMLHttpRequest () to obtain new activexobject ().
Function getxmlhttprequest (){
VaR XMLHttpRequest = NULL;
If (typeof XMLHttpRequest )! = 'Undefined '){
XMLHttpRequest = new XMLHttpRequest ();
} Else {
XMLHttpRequest = new activexobject ("Microsoft. XMLHTTP ");
}
Return XMLHttpRequest;
}

Step 2 Use XMLHttpRequest to send a request
1) Send a GET request
VaR url = "Some. do? Name = Zs ";
Xhr. Open ("get", URL, true );
Get: Request Method
URL: The request address, which can be connected to parameters
True: asynchronous request
// Register the listener
Xhr. onreadystatechange = F1;
// Send the request to actually send the request
Xhr. Send (null );

2) Send a POST request
VaR url = "Some. Do ";
Xhr. Open ("Post", URL, true );
// Set the Message Header
Xhr. setRequestHeader ("Content-Type", "application/X-WWW-form-urlencoded ");
Xhr. onreadystatechange = F1;
Xhr. Send ("name = Zs ");
Step 3 the server processes the request and returns the response
Step 4 process the server response in the listener
Function F1 (){
// Process related Code
}
Xhr. onreadystatechange = F1;
Xhr. onreadystatechange = function (){
If (xhr. readystate = 4 ){
// Obtain text data
VaR TXT = xhr. responsetext;
// Obtain the xml dom object
VaR xml = xhr. responsexml;
// Dom operation updates page data
}
}

 

Example: Check whether the user is available

Example 1: asynchronous location

1. jsp page

  Note: jquery's support for Ajax  

 

2. servelet

  Example 2: SynchronizationJSP page servlet code

<div></div>

 

 

 

 
3. XMLHTTPRequest object

Readystate attributes:The communication status between XMLHttpRequest and the server.
0 (created): the XMLHTTPRequest object has been created, but the open method is not called.
1 (initialization): XMLHttpRequest does not call the send () method.
2 (send): XMLHttpRequest starts to send data to the server.
3 (getting data): XMLHttpRequest, is retrieving data returned by the server
4 (data retrieval is complete): You can use XMLHttpRequest to obtain all data returned by the server.

Reponsetext attributes: Text returned by the server.
Responsexml attributes: XML data returned by the server.
Onreadystatechange attribute: Used to set the callback function, that is, to process the data returned by the server.
Status attribute: Status Code returned by the server, (200,500,404)

 
4. cache Problems

In IE, if the request is a GET request, ie will cache the requested data. If the address remains unchanged next time, ie will not send a real request, the cached data is displayed to the user.
Solution:
1. You can add a random number to the end of the address.
2. Use post to send requests.

 
5. Encoding Problems

1) in the browser, if the request method is post, the browser will encode the data in UTF-8.
2). In the browser, if the request method is get, ie uses "GBK/gb2312" to encode Chinese characters,
Use UTF-8 in Firefox.

Solve the encoding problem:
Step1. modify server. xml.
Add uriecoding = "UTF-8 ",
Encode GET requests with UTF-8
Step2. use the encodeuri () function for the request address,
Use UTF-8 encoding for Chinese characters in the address

 
6. Prototype

$ (ID): Document. getelementbyid (ID );
$ F (ID): Document. getelementbyid (ID). value;
$ (Id1, id2....) gets multiple objects and returns an array.
Evaljson: converts a string in JSON format to a JS object.

 

7. JSON

Javascript tonation object is a lightweight data exchange format, mainly used to exchange data between the server and Js.

1). JSON indicates the object
A. indicates an object.
VaR OBJ = {'attribute': 'attribute name', 'attribute': 'attribute name', 'attribute': 'attribute name '....}
Attribute must be enclosed in quotation marks.
If the attribute value is a string, quotation marks are required.
Attribute Value Type: String, number, null, object, Boolean
B. indicates an array.
VaR arr = [{},{},{}]
2). convert a Java object to a string in JSON format
A. convert an object
Jsonobject jobj = jsonobject. fromobject (OBJ );
Jobj. tostring ();
B. convert an array or set
Jsonarray arr = jsonarray. fromobject (stus );
Arr. tostring ();

The registration page checks whether the user is available and the cascade of the city drop-down list

1. The registration page regist. jsp under the webroob directory

 

  2. Web. xml under the WEB-INF directory 3. Name of the jar package under the lib directory

Json-lib-2.2.3-jdk15.jar

 

4. Select the real class option. Java under the src directory

 

5. servlet under the src directory

Actionservlet. Java

 

 

 

Jquery's support for Ajax

$. Get (URL, callback function, data type );

$. Post (URL, Data, callback function, data type );

 

Transmit JSON data

JSON = {property name: property value, property name: property value };

 

Example: cascade in the drop-down box

 

JSP page

Servlet code

 

Note: layer settings

Style: Z-index: positive; // 500 sets a layer for the demarcation line

JS object: div. style. zindex = positive number

Mybg. style. Filter = '"alpha (opacity = 30)"; // sets the transparency.

Mybg. style. Overflow = 'ddd ';

 

 

 

Summary

 

Knowledge Review

 

Jquery is a JS framework.
Similar framework extjs
Framework: An organic combination of program code. It is a semi-finished product in the process of program development.
Dependency Library: jquery-1.4.3.js
Syntax:
$ ()

Selector
Basic Selector

Id Selector
$ ("# Id value ")

Tag Selector
$ ("Tag name ")

Class Selector
$ (". Class value ")

Group Selector
$ ("Tag name 1, tag name 2 ");

Include Selector
$ ("Tag name 1 tag name 2 ");

Form Selector
$ (": Input") selects all input tags
: Select all the labels whose type is text in the input label from text.
: Password
: Button
: Radio
: Reset
: Checkbox
: Hidden
: Submit
: Image
: File

Conditional Selector
Basic Conditions
: First
: Last
: Lt (subscript)
: GT (subscript)
: The odd number of odd, subscript starts from 0
: Even number of even, subscript starts from 0
: Eq (subscript)
: Not (selector), remove

Content limitation
: Contains (character) Select a tag containing a specific character
: Whether parent contains sub-tags
: Empty
: Has (selector) selects the parent tag containing a sub-tag

Attribute limitation
[Attribute name] Selects all tags containing this attribute
[Attribute name = attribute value]

Visibility limitation
: Visible: Select visible
: Hidden: Select hidden

Select limits
: Checked
: Selected

Limits on sub-tags
: First-child
: Last-child
: Nth-child (expression)

 
Dom
Obtain tags
$ (Selector );
Create tag object
$ ("Tag"); Any jquery API returns a jquery object
Insert tag
Parent tag. append ("Child tag") append a child tag
Parent tag. prepend ("Child tag") insert a child tag at the beginning
Tag. Before ("tag ");
Tag. After ("tag ");
Child tag. appendto ("parent tag selector") append the child tag to the corresponding parent tag
Delete tags
Tag. Remove (selector) delete a specific tag
Tag. Remove () delete tag
Tag. Empty () delete all content
Get add attribute
Property value = tag. ATTR (property name)
Tag. ATTR ("attribute name", "attribute value ")
Tag. ATTR ({"attribute name", "attribute value", "attribute name", "attribute value "});
Change style
Label .css ("style attribute name", "style value ")
Label .css ({style property name: "style value", style property name: "style value "});
Label. addclass ("class value ");
Tag. removeclass ("class selector value ");
Animation Effect
Show (Fast/slow/number );
Hide ();

Fadein (Fast/slow/number); fade in and out
Fadeout ();
Set to obtain the TAG body
VaR xx = label .html ()
Tag .html ("content ")
Var val = label. Text ()
Label. Text ("text ");
 
Dynamic binding event
1. $ (document). Ready (function event); execute the events bound to ready after the HTML document is loaded.

$ (Document). Ready (function (){
// Obtain the event tag
$ ("# Span2"). BIND ("Mouseover", function (){

Alert ("hello ");
});

});

$ (Document). Ready (function (){

$ ("# Span2"). Mouseover (function (){
Alert ("AAAAA ");
});
});

2. $ (function (){
Function event
});

$ (Function (){

$ ("# Span2"). Mouseover (function (){

Alert ("AAA ");
});

});

Jquery's support for Ajax
$. Get (URL, callback function, data type)
$. Post (URL, Data, callback function, data type)
$. Ajax ();

$ (Function (){

$ (": Text: First"). Blur (function (){
Var val = $ (": Text: First"). ATTR ("value ");
VaR url = "http: // localhost: 8899/hellojsp129/? Name = "+ val;
$. Get (URL, function (data ){
$ ("# Span1" pai.html (data );
});
// $. Post (URL, {name: "John", time: "2 "});
});

});

Transmit JSON data
JSON = {property name: property value, property name: property value}
$ (Function (){
$ ("Select: First"). Change (function (){
Var val = $ ("select option: Selected"). ATTR ("value ");
$. Get ("http: // localhost: 8899/hellojsp129/JS? Country = "+ val, function (data ){
// Convert a JSON string to a JSON object to obtain an array of JSON objects.
VaR jsons = eval ("(" + Data + ")");
// Obtain the last select and convert the jquery object to the JS object
// Var sel = $ ("select: Last"). Get (0 );
VaR sel = $ ("select: Last ");
Sel. Empty ();
For (VAR I = 0; I <jsons. length; I ++ ){
Sel. append ("<option value = '" + jsons [I]. ID + "'>" + jsons [I]. Name + "</option> ");
}
});
});

});