| ajax
loading file content to div |
|
|
|
| ajax |
|
| asyncrhonous javascript and
xml |
|
|
|
| it is not a programming
language |
|
|
|
| to take data froom server at
browser builtin onbject |
|
|
|
| xml http dom |
|
|
|
| after
page load, using ajax, request the data from server |
|
|
| without page reload |
|
|
|
| its
background work, user not knowing about sending requuest |
|
|
|
|
| in ajax ist
we willl check the browser is supports are not |
|
|
| we create this using xmlhttprequest |
|
| all browsers have built in object, |
|
| variable = new XMLHttpRequest(); |
older borwsers |
|
|
|
variable = new ActiveXObject("Microsoft.XMLHTTP"); |
| if the browser is support it wil load to
xmlhttp |
|
| we are checking the browser using window |
|
|
|
|
|
| if (window.XMLHttpRequest)
{ |
|
| // code for modern browsers |
|
| xmlhttp = new XMLHttpRequest(); |
|
| } else { |
|
| // code for old IE browsers |
|
|
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); |
| } |
|
|
|
|
|
|
|
|
|
| we checked the browser using
xmlhttprequest |
|
|
|
| in ajax we
ist write what we have to do after recieves the data |
| means before
sendig data , we write what we have to do after recieves |
| xmlhttprequest has
onreadystatechange |
|
| property is there |
|
| it will tell
what will do how to receive the information |
| using afunction called readystate |
|
|
|
| wechecked
the browser and we created the object what we have to do if the data is
returned from the server |
|
|
| xmlhttp.onreadystatechange =
function(){ |
|
| we are
telling we have to do one thing if data is returned from server using this
function |
|
|
|
|
| using
readystate - it tells we succesfully received the data or not |
| if we succsffully received the data |
|
| store the data into a html using
resposetext |
|
|
|
| if(xmlhttp.readyState
== 4 && xmlhttp.status == 200){ |
| document.getElementById(thediv).innerHTML
= xmlhttp.responseText; |
|
|
| till now we
checked the browser and redy to receive , it is succesfully received or not
and store that received dat to html |
|
|
| sending a
request to server about we want this url and using somme method |
|
|
| using send we send that, request |
|
| what we send using open |
|
|
|
| xmlhttp.open('GET', thefile,
true); |
|
| xmlhttp.send(); |
|
|
|
| <html> |
|
| <head> |
|
| <script> |
|
| function load(thediv,
thefile){ |
|
| if(window.XMLHttpRequest){ |
|
| xmlhttp = new
XMLHttpRequest(); |
|
| } else{ |
|
| xmlhttp =new
ActiveXobject('Microsoft.XMLHTTP'); |
|
| } |
|
| xmlhttp.onreadystatechange =
function(){ |
|
| if(xmlhttp.readyState
== 4 && xmlhttp.status == 200){ |
| document.getElementById(thediv).innerHTML
= xmlhttp.responseText; |
| } |
|
| } |
|
| xmlhttp.open('GET', thefile,
true); |
|
| xmlhttp.send(); |
|
|
|
| } |
|
| </script> |
|
| </head> |
|
|
|
| <body> |
|
|
|
| <input
type="submit" onclick ="load('adiv', 'RHYMES.txt')"
value="submit"> |
| <br> |
|
| <div
id="adiv"> </div> |
|
| </body> |
|
| </html> |
|
|
|
|
|
| To
send a request to a server, we use the open() and send() methods of the XMLHttpRequest object: |
|
|
|
|
| open(method, url, async) |
Specifies the type of request |
| |
| method: the type of request: GET or POST |
| url: the server (file) location |
| async: true (asynchronous) or false (synchronous) |
| send() |
Sends the request to the server
(used for GET) |
| send(string) |
Sends the request to the server
(used for POST) |
|
|
|
|
|
|
| xhttp.open("GET", "ajax_info.txt", true); |
| xhttp.send(); |
|
|
|
| javascript
executed in sychronous, using single thread |
| javascript
engine in browser exeucte the javascript code |
|
|
| in javascript, it will executs step by
step |
|
|
|
| single
thread means it will execute at time one thing |
it is called
the function, after completion of functuon onley it will executes next things
|
No comments:
Post a Comment