Learning jQuery - Chapter VI: Ajax in jQuery (Ayjaks query in G.)
Chapter Six:
jQuery and Ayjaks:
Jquery very efficient library for working with Ajax technology in itself that this season we will introduce it.
Need to know before starting what is Ajax?
Ajax is short term is Asynchronous JavaScript and XML. The technology for the first time using JavaScript Xml data was created.
Ajax is a programming language. But the technology to communicate with the server via JavaScript and Dynamic pages are created.
Ayjaks core object called XMLHttpRequest Is.
Briefly: Ayjaks indirect communication and information exchange with the web server so everything happens in the background, and thus only part of the screen so the entire page will need to Reload (refresh) is not.
Ayjaks in jquery:
Functions for working with the jquery Ayjaks there working with this technology has been very easy. By these functions can exchange information with the server as TXT, HTML, XML and JASON using two methods GET and POST did.
And you can conclude that information obtained from the server element (selector) Get screened.
The following review will deal with these functions:
Function of load:
$ (Selector). Load (url, data, callback)
The function files in the url address and read the results after the full implementation of the selected element (Selector) displays.
A simple example:
Suppose the file name in the directory loadtxt.txt server files you want and clicking a button on the page that get displayed:
<html>
<head>
<script type="text/javascript" src="jquery.js"> </ script>
<script type="text/javascript">
$ (Document). Ready (function () {
$ ("Button"). Click (function () {
$ ('# Result'). Load ('files / loadtxt.txt');
});
});
</ Script>
</ Head>
<body>
<button> Click to Load Data </ button>
<div id="result"> </ div>
</ Body>
</ Html>
After the program by clicking the button in the file containing the text div tag will appear.
Load function has two other arguments. Argument data: When you want a server script language (php or asp or aspx files and ...) and should be read from the server for processing Dytayy send by the script argument to do it anyway.
Callback function is the argument that when the operation was fully loaded will be executed.
Example:
Suppose your files in folders on the server have a file called loadname.php its content is as follows:
<? Php
$ Name = $ _REQUEST ['name'];
echo 'Welcome'. $ name;
?>
The program is working as a data name receives and displays the welcome message.
We want to write a program that the user can enter a name Text box and then click on the button. Name the file to be sent and the result is displayed after finishing the message display:
<html>
<head>
<script type="text/javascript" src="jquery.js"> </ script>
<script type="text/javascript">
$ (Document). Ready (function () {
$ ("Button"). Click (function () {
var inputname = $ ('input # name'). val ();
$ ('# Result'). Load ('files / loadname.php', {name: inputname}, finish_load);
});
});
function finish_load ()
{
alert ('load finish');
}
</ Script>
</ Head>
<body>
Please Enter Your Name:
<input type="text" id="name" />
<button> Click to Load Data </ button>
<dir id="result"> </ dir>
</ Body>
</ Html>
As you can see in the above code after clicking the first button buttons by function val value in the textbox read in the presence of variable inputnum. Then use the command file to load this value loadname.php send and reply from the server when the end was found and the welcome message display function is performed and finish_load words "load finish" on the screen will display.
Note 1: The function val (): This function returns the value of a form element, and if its value is the amount of property value will Nsbt element selector.
$ (Selector). Val (content);
Note 2: If you want more data as the server can send data into them and {} put any data with a comma "," separated from the next data can:
{Var1: value1, var2: value2, var3: value3}
Function $. Ajax (option):
The lowest level of function in working with Jay Ayjaks query function is ajax. To use this function, all parameters must be submitted by the argument we send to the server option.
Simple example:
$. Ajax ({
url: 'ajax / test.html',
success: function (data) {
$ ('. Result'). Html (data);
alert ('Load was performed.');
}
});
In this example the function of the test.html file ajax server and call the result the result shows the element with the class.
With this function than other functions that will be introduced is more difficult. Therefore recommended only in cases of this function needs to be used instead of the simple functions are used.
Function: $. Get and $. Post:
$. Post (url, data, callback, type);
$. Get (url, data, callback, type);
These two functions as the name suggests two different methods and get post scripts to call url from the server and return results by Tay callback.
- url: address of the server-side script should be run
- Data: data that is sent to the server: {name: value, name: value, ...}
- Callback: a function that when data from the server was completely render is called.
- Type: type of output data from the server and can specify values (html, xml, json, jasonp, script, text) is
The only difference between these two functions in the type of data to the server post the first method uses the latter method get. So if you just want to reread a file from the server can send data to the server and intend to do, better get use of the function. (Or subject to load).
(If you do not know about these two methods to teach programming languages like php or asp under server please.)
Example:
The example above was written for the ajax function function can get the following wrote:
$. Get ('ajax / test.html', function (data) {
$ ('. Result'). Html (data);
alert ('Load was performed.');
});
Or another example: In this example we want the same example at the beginning of the season to load functions written post write function. In this case, part of our code will change as follows:
$ (Document). Ready (function () {
$ ("Button"). Click (function () {
var inputname = $ ('input # name'). val ();
$. Post ('files / loadname.php', {name: inputname}, function (Data) {
$ ('# Result'). Html (Data);
finish_load ();
});
});
});
As you can see in the example. Callback function with the amount of data after the call is complete loadname.php called this function in the same amount of data is the result of command scripts loadname.php html (data) result in the element with ID will appear.
Function getScript:
$. GetScript (url, callback)
Function getScript, to call and execute a JavaScript file (js) is used.
Ajax function function simplified format is:
$. Ajax ({
url: url,
dataType: 'script',
success: success
});
Example:
$.getScript("test.js");
This example makes the call and will run test.js file.
$.getScript("http://blog.monavarian.ir/test.js", function(){
alert("Script loaded and executed.");
});
In the above example file is called test.js blog.monavarian.ir address and if the call is successful, the appropriate message will appear.
Tip: You can use this function when you want global variables put in a separate file and then use the programs.
Function getJSON:
$. GetJSON (url, data, callback);
This function calls the server file format is Jason.
In parentheses (brief Jason):
Files Jason, are data files that certain data formats are stored. Xml files as files Jason also has a specific format for data storage are.
Jason object structure to be faced:
{String: value, string: value, ...}
Value is quantities can contain string, object, number, array, true, false, null should.
Jason Array structure in the following form:
[Item1, item2, item3, ...]
Each item can also include their values are introduced above.
For more information reference sites to address Jason http://www.json.org See.
A general example of the post: In this example we're going by the Fermi function of jquery, and then sent by the server function and post the results to display:
For example, we want to create a simple form entry drawn. Forms.php script file that checks the username and password given in the List is available. If there is a value that is not available and if it returns zero. If this file contains the following:
<? Php
/ / User defind:
$ Users = array (
'Admin' => 'demo',
'Test' => 'test',
'User' => 'pass',
);
$ Username = trim ($ _POST ['username']);
$ Pass = trim ($ _POST ['password']);
if (array_search ($ pass, $ users) == $ username)
echo '1 ';
else
echo '0 ';
?>
The files we store files in the folder.
The original file html:
<!DOCTYPE html PUBLIC "-//W۳C//DTD XHTML ۱.۰ Transitional//EN" "http://www.w۳.org/TR/xhtml۱/DTD/xhtml۱-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="jquery.js" type="text/javascript"> </ script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
$ (Document). Ready (function () {
$ ('Input'). Focus (function () {
$ ('Input'). RemoveClass ('select');
$ (This). AddClass ('select');
});
$ ('Form'). Submit (function (event) {
event.preventDefault ();
var user = $ ('input # username'). val ();
var pass = $ ('input # pass'). val ();
if (! user)
{
$ ('. Result'). Html ('please Enter username');
$ ('Input # username'). Focus ();
}
else if (! pass)
{
$ ('. Result'). Html ('please Enter password');
$ ('Input # pass'). Focus ();
}
else
{
$. Post ('files / forms.php', {username: user, password: pass}, function (data) {
if (data == '1 ')
{
$ ('. Result'). Html ('Login Success <br/> welcome' + user);
$ ('Form'). Hide ();
}
else if (data == '0 ')
$ ('. Result'). Html ('username or password is not correct')
else
$ ('. Result'). Html ('can not connect to server')
})
}
return false;
})
})
</ Script>
<title> Form Validation </ title>
<style>
. Result {
color: # FF0000;
}
. Select {
background: # fff;
border: 2px solid # 0000ff;
}
</ Style>
</ Head>
<body>
<div class="result"> </ div>
<form action="#">
<input type="text" name="username" id="username" />
<input type="password" name="pass" id="pass" />
<input type="submit" value="Login"/>
</ Form>
</ Body>
</ Html>
As you can see in the above code. At first when submit the form and checks if fields are empty username or pass the appropriate message is inserted and then the marker will lead to an empty field (focus).
If the username and pass was entered. This amounts to the file and sends a result forms.php checks: if the result is sent from a server welcome message and shows the hidden form (hide) will otherwise be inserted to the proper message.
Categories: Education Jquery , Web Design
Hello dear friend
Thanks for your efforts
New integrity congratulate you in advance Kim
Be successful and win
Red Rose